同一ページ内でYouTubeを複数設置したときに、同時再生をさせないようにする
同一ページ内でYouTubeプレーヤーを複数埋め込んだとき、 通常だと同時に再生することができてしまいます。 実装前のデモページ 今回はこれを回避する方法を考えてみました。 対応方法案 対応方法として、以下の3案を考えました。 YouTubeプレーヤーではなくサムネイルを設置するようにして、サムネイルをクリックしたら ライトボックスを表示して再生するようにする。 YouTubeプレーヤーの設置を一つだけにして、代わりにサムネイルを設置。 サムネイルをクリックでYouTubeプレーヤーのURLが切り替わるようにする。 YouTubeプレーヤーをクリックして再生したときに、 他に再生しているYouTubeプレーヤーがあったら停止させる。 今回はYouTubeプレーヤーを複数埋め込むことが決まっていたたので、3番目を実装してみました。 ただ、実装するのは3案どれでも問題なさそうなので、場合に応じ
YouTube Player APIを使う時のtips集 ｜ Tips Note by TAM
以前にYouTube Player APIの基本的な使い方をまとめたので、今回は実際に使う時に便利そうなtipsをいくつかまとめてみました。 以前の記事はこちらです。 YouTube Player APIを使って色々やってみる ■目次 動画のループ再生 動画の自動再生 タイトルやコントロールバーを出さないようにする 動画再生の開始位置や終了位置を設定する 動画の画質を変更する 初期表示をサムネイルにする 背景動画にする 1. 動画のループ再生 動画のループ再生を設定する方法は2種類あります。 1-1. パラメータで設定する パラメータで設定する場合、loopとplaylistを使用します。 ■HTML <div id="sample"></div> ■JavaScript // IFrame Player API の読み込み var tag = document.createElement
YouTubeを効果的に見せるための12の隠しパラメータ
YouTubeの動画をブログに貼り付けるときに次のようなiframeタグを利用するのはご存知かと思います。 <iframe width="470" height="269" src="http://www.youtube.com/embed/YDxYmhze5Do" frameborder="0" allowfullscreen> </iframe> このiframeタグに隠しパラメータ（隠されている訳ではありませんが）をつけることで見栄えや動作を変更することができます。 以下の動画はパラメータを付与してみたものです。テーマおよびプログレスバーの色の変更して、セピアカラーの動画にマッチしたデザインにしています。再生後の関連動画の非表示や再生開始位置の変更なども行っています。 ということで以下、隠しパラメータの紹介です。すべてのパラメータは、次の設定例のように、src属性に設定したURLの末
YouTube Player APIを使用したiframe動画の基本vol2 – ミュートの切り替え | Stronghold Archive
どうもこんにちは。toshikuraです。今回のTipsは【YouTube Player APIを使用したiframe動画の基本vol2 – ミュートの切り替え】です。前回から引き続きYouTube Player APIのiframe Embedsの記事です。前回は動画の設置と再生停止に関しての記事でしたが今回は音量の切り替えが対象なります。 実装方法 動画の設置に関しては割愛していますので詳しくは動画の設置と再生停止をご確認ください。 HTML <div id="player"></div> <a class="youtube_mute" href="#">MUTE</a> <a class="youtube_unmute" href="#">UNMUTE</a> $(‘.youtube_mute’).click(function(){ player.mute(); }); アンミュート
割席断交(海外ドラマなどの感想)
読むのにかかる時間 5 分 ビデオはこちらで。 【最終結果】 # Anime #1 #2 #3 #4-5 #6-10 #11-20 Points 1 Frieren: Beyond Journey’s End 60 69 62 128 …
YouTube Player APIを使用したiframe動画の基本vol1 – 動画の設置と再生停止 | Stronghold Archive
どうもこんにちは。toshikuraです。今回のTipsは【YouTube Player APIを使用したiframe動画の基本vol1 – 動画の設置と再生停止】です。少し前にvimeoAPIについて記事を書きましたのでYouTubePlayerAPIについても書いてみようかと思いました。内容は簡単ですができることも多いので覚えておいても損は無いかと思います。 まずはじめに 最初にYouTube Player APIを使用したiframe動画（YouTube Player API Reference for iframe Embeds）を使用するにあたってAPIを読み込んでおく必要があります。また今回のデモではコードを短くしたかったのでjQueryを使用しています（なくてもOKです）。 <script src="js/jquery-1.9.0.min.js"></script> <scr
iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API | Google for Developers
iframe 組み込みの YouTube Player API リファレンス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 IFrame Player API を使うと、YouTube 動画プレーヤーをウェブサイトに埋め込み、JavaScript でプレーヤーを制御できます。ウェブページに Flash オブジェクトを埋め込む Flash や JavaScript のプレーヤー API とは異なり、IFrame API はコンテンツをページの <iframe> タグに投稿します。この方法は従来の API よりも柔軟で、Flash をサポートしていないモバイル デバイスの場合に、Flash プレーヤーではなく HTML5 プレーヤーで YouTube を利用できます。 この API の JavaScript 関数を使うことで、再生する動画の頭出し、動画の再生
Youtube の埋め込み動画を自動再生やループ再生やプレイリストを再生する方法
投稿日：2014/02/16 サイトに Youtube の埋め込みプレイヤーを貼り付ける方法は二つあります。 一般的なのは Youtube の再生ページから貼り付けコードを取得したときに使われる、iframe の HTML5 のコードです。 他に Java Script Player API という様々なパラメータを使える貼り付け方があるのですが、こちらはコードが長く一般的ではありません。 大半のパラメータは iframe HTML5 のプレイヤーで使用できるので、こちらのタイプでの設定方法を紹介します。 Youtube の再生ページから、共有＞埋め込む＞コードを取得、で取得したコードは次のようになります。 <iframe width="幅" height="高さ" src="https://www.youtube-nocookie.com/embed/動画 ID" frameborder
『【カスタマイズ】動画をヘッダーの背景に設定する方法』
※2016年11月21日 更新 コードや本文を一部変更済み。以前のものだと動画上下に黒い背景が表示されてしまうため、新たにjQueryを使用したコードに変更しました。 詳細については、新たにご紹介した記事をご用意しましたので、ご参照ください。 YouTube動画をヘッダーの背景に設定する方法 ------- 先日Youtube動画をヘッダーの背景として利用したサンプルページを作成してみました。 その紹介記事を書いてみたところ、ちょこちょこ反響をいただきましたので、今回この記事にてYoutube動画をヘッダーの背景に設定する方法についてご紹介していきます。 動画をお持ちの方は、ぜひチャレンジしてみてください。 Youtube動画をヘッダーの背景に設定する方法 完成イメージは、以下のサンプルページのヘッダーです。 >> 動画ヘッダーサンプル ※2016/11/21更新 新たな動画ヘッダーを作成
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
YoutubeやVimeoの動画を背景に指定できるjQueryプラグイン・OKFocus video
YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。 動画を手軽に背景指定出来る、というもの。 動作サンプルです。 背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> <script src='okvideo.js'></script>本体とスクリプトを読み込みます。 $(function(){ $.okvideo({ source: 'http://vimeo.com/*****', volume: 0 }) });VimeoまたはYoutubeの動画のURLを貼るだけ。これで背景に動画が流れます。ミュートはvolumeを0に指定します。 他にもオプションいろいろ。詳細は以下でご確認下さ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.youtube.com/playlist?list=PL6050E2EE8EDFA337
福山雅治 Talking FM 2013.03.24〔886回〕
http://onlineconsultant.jp/pukiwiki/?Youtube%E3%80%80%E9%99%90%E5%AE%9A%E5%85%AC%E9%96%8B%E5%8B%95%E7%94%BB%E3%82%92%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E8%B2%BC%E3%82%8A%E3%81%A4%E3%81%91%E3%82%8B
IDEA * IDEA