YouTube動画パラメータ まとめ１／コントロールバー等
YouTubeにアップした動画を自社サイトに埋め込む企業はたくさんありますが、再生方法や、見た目をカスタマイズしている会社は非常に少ないのではないでしょうか。例えば、ページを開くと同時に動画を自動再生させたり、動画を連続してリピート再生させるなどのカスタマイズです。
このようなカスタマイズは決して難しいものではありません。YouTube動画を埋め込む時、貼り付けるコードにちょっとしたパラメーターを書き加えるだけでOKです。
Google Developersサイトには次の２３個のパラメーターが紹介されています。
| ・autohide ・autoplay ・cc_load_policy ・color ・controls ・disablekb ・enablejsapi ・end ・fs ・hl ・iv_load_policy ・list | ・listType ・loop ・modestbranding ・origin ・playerapiid ・playlist ・playsinline ・rel ・showinfo ・start ・theme |
そこで今回は、「パラメーターのまとめ1」として、埋め込み動画の見た目やデザインをカスタマイズするためのパラメーターをご紹介します。
※自動再生など「再生」に関するカスタマイズ法は、「YouTube動画パラメータまとめ２」をご覧ください。
YouTubeパラメーター：前提・基本的ルール
まずは、下の動画を題材に、パラメーターの基本的な書き加え方をご説明します。
この動画の埋め込みコードは次の通りです。
1 | <iframe width="560" height="315" src="https://www.youtube.com/embed/Xh2-NiXTvAI" frameborder="0" allowfullscreen></iframe> |
埋め込みコード内の「https://www.youtube.com/embed/Xh2-NiXTvAI」が動画のURLになり、このURLの後ろにパラメーターを書き加えることで、様々なカスタマイズが可能となります。
パラメーターを書き加える時は、URLの後ろに「？」を書いてからパラメーターを書きます。
https://www.youtube.com/embed/Xh2-NiXTvAI?パラメーター
パラメーターを複数書き加える場合は「&」でつなぎます。
https://www.youtube.com/embed/Xh2-NiXTvAI?パラメーター&パラメーター
パラメーターの基本的な書き加わえ方は以上となります。
ではいよいよ、１つ１つパラメーターを見ていきましょう。
１．タイトルバーを非表示にする
画面上部にあるタイトルバーには動画のタイトルやシェアボタンが表示されいますが、これをパラメーターを使って消すことができます。タイトルバーをクリックしてYouTubeサイトに移動してほしくない場合などに行います。
＜追加するパラメーター＞
showinfo=0 タイトルバーを非表示
showinfo=1 タイトルバーを表示
＜追加後の埋め込みコード例＞
1 | <iframe width="560" height="315" src="https://www.youtube.com/embed/Xh2-NiXTvAI?showinfo=0" frameborder="0" allowfullscreen></iframe> |
２．コントロールバーのYouTubeロゴを非表示にする
画面下のコントロールバーにはYouTubeのロゴが入ってます。このロゴをクリックするとYouTubeサイトに飛んでしまうので、ユーザーの流出を防ぎたい時に行います。
＜追加するパラメーター＞
modestbranding=0 ロゴ表示
modestbranding=1 ロゴ非表示
＜追加後の埋め込みコード例＞
1 | <iframe width="560" height="315" src="https://www.youtube.com/embed/Xh2-NiXTvAI?modestbranding=1" frameborder="0" allowfullscreen></iframe> |
３．全画面表示ボタンを非表示にする
初期値では表示されている全画面表示ボタン。これを、パラメーターで消すことができます。動画を埋め込んだページのデザインや企画の都合上、全画面で再生して欲しくない時に行います。
＜追加するパラメーター＞
fs=0 ボタン非表示
fs=1 ボタン表示
＜追加後の埋め込みコード例＞
1 | <iframe width="560" height="315" src="https://www.youtube.com/embed/Xh2-NiXTvAI?fs=0" frameborder="0" allowfullscreen></iframe> |
４．コントロールバーを非表示にする
コントロールバーを消して、画面をスッキリさせたい時に行います。動画の再生/停止は画面自体をクリックして行うことになります。コントロールバーを消すと、見た目はスッキリしますが、再生ボタンだけでなく音量操作のボタンも消えてしまうので、利便性は確実に下がります。
＜追加するパラメーター＞
controls=0 コントロールバー非表示
controls=1 コントロールバー表示
＜追加後の埋め込みコード例＞
1 | <iframe width="560" height="315" src="https://www.youtube.com/embed/Xh2-NiXTvAI?controls=0" frameborder="0" allowfullscreen></iframe> |
５．コントロールバーを常に表示させる
「４」とは逆に、動画が再生し始めると隠れてしまうコントロールバーを常に表示させることができます。コントロールバーを常に表示させておくことで、動画ローディングの進捗具合を把握できたり、ボリューム調整も直観的にできたり、動画の再生時間も一目で分かるなど、利便性は高まります。
＜追加するパラメーター＞
autohide=0 常に表示
autohide=1 再生開始後に隠れる（デフォルト）
autohide=2 シークバーだけ残る
＜追加後の埋め込みコード例＞
1 | <iframe width="560" height="315" src="https://www.youtube.com/embed/Xh2-NiXTvAI?autohide=0" frameborder="0" allowfullscreen></iframe> |
６．コントロールバーの色を変更する
コントロールバーの色はデフォルトだと黒色です。これを白色に変更することが出来ます。サイトに埋め込んだ時、デザイン上、黒色だと不具合の時などに行います。
＜追加するパラメーター＞
theme=dark コントロールバーが黒色
theme=light コントロールバーが白色
＜追加後の埋め込みコード例＞
1 | <iframe width="560" height="315" src="https://www.youtube.com/embed/Xh2-NiXTvAI?theme=light" frameborder="0" allowfullscreen></iframe> |
７．シークバーの色を変更する
デフォルトだと赤色のシークバーを白色に変更することが出来ます。
＜追加するパラメーター＞
color=red シークバーが赤色
color=white シークバーが白色
＜追加後の埋め込みコード例＞
1 | <iframe width="560" height="315" src="https://www.youtube.com/embed/Xh2-NiXTvAI?color=white" frameborder="0" allowfullscreen></iframe> |
次回は「YouTube動画パラメータまとめ２」として、動画を指定した箇所から再生させたり、サイトを開いたら自動的に再生させるなど、「再生」に関するカスタマイズ法をお伝えします。
