別冊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

Photoshopのライブシェイプで角丸などが設定できる属性パネルがでない時は

Photoshopのライブシェイプを使うと、
角丸や大きさ、色などを後から編集することができます。
この時に使うのが属性パネル。

f:id:aoicotori:20140717195246j:plain

ただし、この編集モード、一旦選択をはずすと再度選んでも
マスク表示になってしまいます。

f:id:aoicotori:20140717195253j:plain

ライブシェイプの属性を編集したい時は、
シェイプのレイヤーを
option(alt)+クリック

f:id:aoicotori:20140717195300j:plain

再度角丸などが編集できるパネルが表示されます。