memocarilog

YouTubeの埋め込み動画の見た目や再生方法など、思っていた以上にいろいろカスタマイズができることを知ったのでメモとしてまとめました。外観に関することと再生に関することで分けてあります。

カスタマイズのほとんどを動画のパラメータで設定することができます。

パラメータを設定した場合のデモを確認できるページを発見しました。

YouTube Player Demo – YouTube — Google Developers

右側でパラメータを設定して、動画下の青いボタン「Update player with selected options」をクリックすると動画が設定したパラメータに変更されます。

外観を変更するカスタマイズ

デフォルトで埋め込みコードを取得すると以下のような形になっているかと思います。

<iframe width="420" height="315" src="//www.youtube.com/embed/
動画ID" frameborder="0" allowfullscreen></iframe>

カスタマイズ例は上記のデフォルトコードを元にパラメータを追加しています。パラメータは動画IDのあとに「?」でつないで記入します。

コントロールバーとインフォメーションバーの自動非表示をオフにする

デフォルトでは動画が再生されると、画面下部のコントロールバーと画面上部のインフォメーションバーが自動的に非表示となりますが、それをやめて常に表示させます。
パラメータ autohide を 0 にします。

例）
<iframe width="420" height="315" src="//www.youtube.com/embed/動画ID?
autohide=0" frameborder="0" allowfullscreen></iframe>

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

デフォルトの自動非表示だと最初にコントロールバー（画面下部の再生ボタンや音量ボタンがあるバー）が表示されますが、最初から全く表示しないようにします。
パラメータ controls を 0 にします。常に表示するにはパラメータを 1 にします。

例）自動非表示をオフにして、コントロールバーを非表示にする場合以下のようにします。
<iframe width="420" height="315" src="//www.youtube.com/embed/動画ID?
autohide=0&controls=0" frameborder="0" allowfullscreen></iframe>

複数パラメータを設定するときは「&」でつなぎます。

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

上記と同じくデフォルトの自動非表示では最初に表示される、上部のインフォメーションバー部分を全く表示されないように設定します。
パラメータ showinfo を 0 にします。常に表示するにはパラメータを 1 にします。

例）
<iframe width="420" height="315" src="//www.youtube.com/embed/
動画ID?showinfo=0" frameborder="0" allowfullscreen></iframe>

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

デフォルトでは黒のコントロールバーの色をシルバーに変更します。
パラメータ theme を light にします。

例）
<iframe width="420" height="315" src="//www.youtube.com/embed/
動画ID?theme=light" frameborder="0" allowfullscreen></iframe>

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

デフォルトでは赤のプログレスバー（動画の進行状況を示すバー）の色を白に変更します。
パラメータ color を white にします。

例）コントロールバーとプログレスバーをシルバーと白にする。
<iframe width="420" height="315" src="//www.youtube.com/embed/動画ID?
theme=light&color=white" frameborder="0" allowfullscreen></iframe>

レスポンシブデザインに対応する

width=”” を設定してよこ幅を固定している場合に、指定幅より狭くなった時、ウィンドウサイズに応じた横幅へ変更してくれます。
class=”movieif_smartphone_resize” を付与します。

例）
<iframe width="420" height="315" src="//www.youtube.com/embed/動画ID?
theme=light&color=white" frameborder="0" 
class="movieif_smartphone_resize"　allowfullscreen></iframe>

再生に関するカスタマイズ

自動再生にする

ページを読み込むと同時に動画を再生するようにします。
パラメータ autoplay を 1 にします。

例）
<iframe width="420" height="315" src="//www.youtube.com/embed/動画ID?
autoplay=1" frameborder="0" allowfullscreen></iframe>

関連動画を表示しない

動画の再生が終わった時に関連動画の表示をするようにします。
パラメータ rel を 0 にします。

例）
<iframe width="420" height="315" src="//www.youtube.com/embed/動画ID?
autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>

再生開始位置を指定する

動画を再生するときに指定した秒数から再生します。
パラメータ start に秒数を指定します。

例）50秒後から再生する。
<iframe width="420" height="315" src="//www.youtube.com/embed/動画ID?
start=50" frameborder="0" allowfullscreen></iframe>

自動リピートにする

動画を自動的にリピート再生してくれます。
パラメータ loop に 1 を指定します。

例）
<iframe width="420" height="315" src="//www.youtube.com/embed/動画ID?
loop=1" frameborder="0" allowfullscreen></iframe>