jQueryでEmbedしたYouTube動画にお好みのパラメーターを付ける方法

ブログをはじめとしてWebサイトに貼り付けられるYouTube動画。
貼り付けたYouTube動画はパラメーターを利用することで外観や再生に関してカスタマイズをすることができます。

そうしたパラメーターをjQueryで自動的に付与する方法を紹介します。jQueryファイルを読み込んでいれば、WordPressに限らず利用できる方法です。

いろいろできるパラメーターの一例

前述のとおり、YouTubeから貼り付けた動画はパラメーターを与えることで外観や再生に関していろいろとカスタマイズすることができます。

まずはそんなパラメーターの一例を紹介しておきましょう。

コントロールバーを非表示にする

動画プレイヤーの下部にあるコントロールバー(再生ボタンや音量ボタンのあるバー)は、デフォルトで再生時に自動非表示されますが、controls=0というパラメーターを付けると、最初から全く表示されないようにすることができます。

パラメーターは<iframe>のsrcで指定されているURLの末尾に?を挿入して付けていきます。

<iframe width="640" height="360" src="//www.youtube.com/embed/gInzvZ2PCt4?controls=0" frameborder="0" allowfullscreen></iframe>

インフォメーションバーを非表示にする

プレイヤーの上部にタイトルなどが表示されるインフォメーションバーを非表示にする場合、showinfo=0というパラメーターを付け加えます。

パラメーターを複数設定する場合は&でつなげばOK。先ほどのコントロールバー非表示と一緒に設定すると以下のとおりになります。

<iframe width="640" height="360" src="//www.youtube.com/embed/gInzvZ2PCt4?controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

コントロールバーの色を変更する

パラメーターとしてthemeというものが用意されており、コントロールバーのデフォルトカラーである「dark」からシルバーカラーの「light」へ変更することができます。

<iframe width="640" height="360" src="//www.youtube.com/embed/gInzvZ2PCt4?theme=light" frameborder="0" allowfullscreen></iframe>

プログレスバーの色を変更する

動画の進行状況を示すプログレスバーの色を、パラメーターcolorを使うことで、デフォルトの「red」から「white」に変更することができます。

<iframe width="640" height="360" src="//www.youtube.com/embed/gInzvZ2PCt4?color=white" frameborder="0" allowfullscreen></iframe>

この他にも多数のパラメーターが用意されています。
自動再生や自動ループ再生、再生開始位置の指定、字幕のオンオフなど、詳しくは以下で確認することができますよ。

パラメーターをjQueryで自動付与する

これらのパラメーターを、いちいち動画を貼り付ける際に付け加えていくのは結構な手間ですよね。
ましてや過去のエントリーで貼り付けた動画まで対応しようと思うと、それこそ果てしなく面倒くさい。

そんな手間を減らすために、jQueryで一括してパラメーターを自動付与させてしまいましょう。

再生開始時間の指定をするパラメーターなどには不向きですが、上で紹介した外観のカスタマイズや、貼り付けた動画にz-indexが効くようにすることができるwmode=transparentといったパラメーターを利用するなら、この方法が最も手軽だと思います。

// YouTubeパラメータ付与
$('iframe[src^="//www.youtube.com"]').each(function() {
var url = $(this).attr("src")
$(this).attr("src",url.substring(0,url.indexOf('?')) + '?rel=0&theme=light&color=white&wmode=transparent')
});

上記のコードでは、関連動画を非表示に、コントロールバーとプログレスバーの色を変更し、z-indexが適用されるよう指定しています。

jQueryなので最前でも書いているように、WordPressに限らず他のCMSやブログサービスでも実装可能です。

ブログでYouTubeの動画を貼り付ける機会が多いという人は、試しに実装してみてはどうでしょうか?