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

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

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

Youtube
Youtube Photo by clasesdeperiodismo

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

前述のとおり、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の動画を貼り付ける機会が多いという人は、試しに実装してみてはどうでしょうか?

「Web制作技術」新着記事

AMP対応したならSearch Consoleでエラーチェックをしておこう

ホシナ カズキ

リンクパーツとして「Embedly」を使うのはいいかもしれんね、という話

ホシナ カズキ

なんか話題のパクリシステム「redo.me.uk」にうちもパクられてた件

ホシナ カズキ

日本語サイト制作するなら、このコーディング向けフォントが最強じゃないかと思う件

ホシナ カズキ

これ使ってみようかな? データベースいらずのフラットファイルCMS「Grav」

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく