厳選！youtube動画の埋め込み小技集
どーも＠PNRAです！
今日もストレッチパワーを溜めながら張り切って便利なTipsを紹介しようと思います。
今日は、youtube動画をホームページにはめ込む際の便利なTipsをご紹介します。
動画公開するにはおそらく一番簡単な手段がyoutubeだと思うので、Youtuberの方や見せ方を検討されている方は是非最後まで目を通してくださいね！活用例としてサンプルには『Jessie Ware - Say You Love Me』をチョイス。本当はAlex Adair Remixのリミックスがオススメなのですが本題と逸れるので、ざざっと進めていきたいと思います。
Jessie Ware - Say You Love Me
Jessie Ware - Say You Love Me - YouTubeコードを埋め込む際の基本知識
埋め込みコードを取得する。
動画の直下にある
「 共有」
ボタンをクリック
「埋め込みコード」を選択し、記載されているコードをコピー＆ペーストで取得します。埋め込みコードの初期値はこのようになっています。
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g" frameborder="0" allowfullscreen></iframe>コードの書き込み位置はここです。
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g'ここにコードを記載します。'" frameborder="0" allowfullscreen></iframe>パラメータを追加する先頭には'？'をつける。
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g'?ここにパラメータを記載します。'" frameborder="0" allowfullscreen></iframe>複数のパラメータを追加する場合は'＆'で繋ぐ。
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g'?パラメータ01&パラメータ02&パラメータ03'" frameborder="0" allowfullscreen></iframe>Tips01：情報表示バーを消す
動画の上部に付いている動画のタイトルやリンク、シェアやインフォメーションボタンなどの表示部分です。初期値は「表示する」になっています。
情報表示バーの表示・非表示のパラメータ
showinfo=0
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?showinfo=0" frameborder="0" allowfullscreen></iframe>上部の黒いバーが消えてますね。
Tips02：YouTubeロゴを非表示にする
埋め込み動画の右下にあるYouTubeロゴの表示に関するパラメーターです。初期値は「表示する」です。
YouTubeロゴの表示・非表示のパラメータ
modestbranding=1
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?modestbranding=1" frameborder="0" allowfullscreen></iframe>右下のyoutubeのロゴが消えてますね。
Tips03：全画面再生ボタンを非表示にする
埋め込み動画の右下にある全画面再生ボタンの表示・非表示に関するパラメーターです。初期値は「表示する」になっています。
全画面再生ボタンの表示・非表示のパラメータ
fs=0
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?fs=0" frameborder="0" allowfullscreen></iframe>右下の全画面表示のマークが消えてますね。
Tips04：動画のコントロールバーを消す
動画下部にある再生や音量、タイム、再生バーやその他諸々の表示の有無を切り替えるパラメーターです。初期値は「表示する」です。
全画面再生ボタンの表示・非表示のパラメータ
controls=0
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?controls=0" frameborder="0" allowfullscreen></iframe>下部のコントロールバーが消えてますね。
Tips05：動画コントロールバーの表示をコントロールする
コントロールバーを常時表示する方法と、再生中にマウスオーバーした時のみ表示する方法の２種類があります。
コントロールバーを常時表示するパラメータ
autohide=0
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?autohide=0" frameborder="0" allowfullscreen></iframe>これで常時コントロールバーは表示されます。
マウスオーバーした時のみ表示するパラメータ
autohide=1
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?autohide=1" frameborder="0" allowfullscreen></iframe>すっきりとして見易くなりましたね。
シークバーのみ変化させるパラメータ
autohide=2
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?autohide=2" frameborder="0" allowfullscreen></iframe>すっきりとして見易くなりましたね。
Tips06：動画コントロールバーの色を変更する
コントロールバーの色を変えることもできます。しかも！なんと２色も用意してくれています。優しいですね、youtube。。
コントロールバーの色変更パラメータ(黒：デフォルト)
theme=dark
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?theme=dark" frameborder="0" allowfullscreen></iframe>これはデフォルトなので特に記述する必要はありません。いつも通りです。
コントロールバーの色変更パラメータ(白)
theme=light
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?theme=light" frameborder="0" allowfullscreen></iframe>あまりここをいじっている人はいないので、ちょっと新鮮です。
Tips07：シークバーの色を変更する
シークバーの色も変えることもできます。しかも！なんとこちらも２色展開！ひゃっほぅ！
シークバーの色変更パラメータ(赤：デフォルト)
color=red
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?color=red" frameborder="0" allowfullscreen></iframe>これはデフォルトなので特に記述する必要はありません。
シークバーの色変更パラメータ(白)
color=white
<iframe width="560" height="315" src="//www.youtube.com/embed/DAMM8JVbr8g?color=white" frameborder="0" allowfullscreen></iframe>かなり些細ですが、シークバーの色が変わっています。
使いどころがどの程度あるかは定かではないですが、知っておいて損はないかと思います。
これを機に色々と皆さんもいじってみてはいかがでしょうか？
Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)
