別冊webメモ

自分用リファレンス&アウトプット

埋め込みyoutubeのカスタマイズ方法

ブログなどで動画を紹介するときに利用する、
youtubeの動画プレイヤーの見た目を、カスタマイズすることができます。

動画の埋め込みコードを取得

youtubeで埋め込みたい動画のページをひらいたら、
動画の下の部分、共有>埋め込みコードから動画のコードをゲットできます。

f:id:aoicotori:20140908193237j:plain
大きさを指定したい場合は、ここで「動画のサイズ:カスタムサイズ」を選択。
横か縦のサイズ片方を指定すれば、残りは自動で入力されます。

各項目は"&"でつなぐ

埋め込みコードのURLの末尾にコードを追加することで見た目を変更できます。

<iframe width="560" height="315" src="//www.youtube.com/embed/lgnGn2edLIo?rel=0&ここに追加していく" frameborder="0" allowfullscreen></iframe>

追加したい項目を”&”でつなげます。
一番始めだけは"?"です。

?rel=0

「動画が終わったら関連動画を表示する」にチェックをすると、この「?rel=0」が消えるので注意。

タイトルバーを消す

動画の上にかぶさっている、タイトルバーを非表示にできます。

&showinfo=0

 

コントロールバーを消す

再生バーを非表示にできます。

&autohide=1

 
逆にずっと出しておきたい場合は

&autohide=0

 

コントロールバーを白くする

再生バーを白くするには

&theme=light

 
シークバーも白くできます。

&color=white


 

YouTube.comで見るのマークを消す

YouTubeへの動線をなくしたい場合に。コントロールバーのマークを消せます。

&modestbranding=1

 

自動再生

読み込んだ後、自動で再生されます。

&autoplay=1
広告を非表示にする