YouTubeの埋め込み動画の見た目のデザインを少し変えたいなぁ〜。
なんて思ったことありませんか？



こんにちは、ピアノ教室管理人です。

ブログなどにYouTube動画を埋め込むとき、貼り付けるコードにちょっとしたパラメーターを書き加えてあげると、いろいろな機能が追加できてなかなか便利です。


まず今回は「まとめ1」として、埋め込み動画の見た目やデザインをカスタマイズするためのパラメーターをご紹介してみます。

次回は再生編のカスタマズをお届けする予定です。^^

※現在のYouTubeの標準埋め込みコードであるiframe版のみ取り上げています。
※スマホではあまり関係ないかもしれません。少なくとも自分のiPhoneでは。^^;


この記事の目次

1. 今回のサンプル動画と埋め込みコードの基本
2. YouTube埋め込み動画の情報表示バーを消す
3. YouTubeロゴを非表示にする
4. 全画面再生ボタンを非表示にする
5. 動画のコントロールバーを消す
6. 動画コントロールバーの表示をコントロールする
• 6-1.動画コントロールバーを常時表示されたままにする
• 6-2最初は非表示で再生中はスライド表示させる
• 6-3.動画のシークバーのみ細くなる
7. 動画コントロールバーの色を変更する
8. シークバーの色を変更する
9. オススメのパラメーターセット

1.今回のサンプル動画と埋め込みコードの基本

今回使うサンプル動画はこちらです。

Googleさんの公式YouTubeチャンネルから『Watch President Obama's Hangout Road Trip』という短い動画です。

この動画の埋め込みコードはこんな感じになっています。

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q" frameborder="0" allowfullscreen></iframe>

動画の縦横のサイズ以外は初期値のままです。

1-1.パラメーターを追記する場所

この埋め込みコードにパラメーターを書き加えてカスタマイズを施していくんですが、パラメーターは下の赤字の部分に追記していくことになります。

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Qここにパラメーターを追記する" frameborder="0" allowfullscreen></iframe>

追記したパラメーターの後ろの「"」を消してしまわないように注意してください。

1-2.パラメーター追記のルール

追記するパラメーターはひとつでも複数でも可能ですが、追記するにあたってちょっとしたルールがあります。

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?追記パラメーター" frameborder="0" allowfullscreen></iframe>

最初に追記するパラメーターの先頭は「?」から始めます。



複数のパラメーターを追記する場合は、

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?追記パラメーター1&追記パラメーター2&追記パラメーター3" frameborder="0" allowfullscreen></iframe>

「&」でつないでいきます。

簡単ですね！


ではそれぞれのパラメーターを見ていきましょう。

2.YouTube埋め込み動画の情報表示バーを消す

埋め込んだ動画の上部に表示されている動画タイトルとリンク、シェアやインフォメーションボタンの表示・非表示を切り替えるためのパラメーターです。
初期値は「表示する」になっています。

埋め込んだページから動画情報のリンクを辿ってYouTubeの再生ページへ移動しないようにしたいときなど、使い方はイロイロですね。

動画情報を非表示にするには？

追記するパラメーター：showinfo=0


動画埋め込みコード例：

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?showinfo=0" frameborder="0" allowfullscreen></iframe>

サンプル動画：

動画上部の黒い帯が表示されなくなってますね。

3.YouTubeロゴを非表示にする

埋め込み動画の右下にあるYouTubeロゴの表示に関するパラメーターです。
初期値は「表示する」です。

YouTubeロゴはYouTube側の再生ページへのリンクになっていますので、読者の離脱を避けるために使うといいかもしれません。

でも、YouTubeさんは何でわざわざこんなパラメーターを用意したのでしょうか？^^

YouTubeロゴを非表示にするには？

追記するパラメーター：modestbranding=1


動画埋め込みコード例：

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?modestbranding=1" frameborder="0" allowfullscreen></iframe>

サンプル動画：

YouTubeロゴが消えましたね。

でもそのかわり右上に「YouTube」の文字が表示されるようになりました。
(´ﾍ｀；)ｳｰﾑ…

4.全画面再生ボタンを非表示にする

埋め込み動画の右下にある全画面再生ボタンの表示・非表示に関するパラメーターです。
全画面再生というのは、パソコンのモニター一杯のサイズで動画を再生することですね。

初期値は「表示する」になっています。

全画面再生ボタンを非表示にするには？

追記するパラメーター：fs=0


動画埋め込みコード例：

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?fs=0" frameborder="0" allowfullscreen></iframe>

サンプル動画：

右下の全画面再生ボタンが消えました。
当然ですがモニター一杯に再生することはできません。

5.動画のコントロールバーを消す

動画下部にある再生や音量、タイム、再生バーやその他諸々の表示の有無を切り替えるパラメーターです。
初期値は「表示する」です。

埋め込んだ動画をスッキリ見せたいときなどに使えますが...。

動画のコントロールを表示させないようにするには？

追記するパラメーター：controls=0


動画埋め込みコード例：

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?controls=0" frameborder="0" allowfullscreen></iframe>

サンプル動画：

見事完全に消えました。もう何をしても表示されません。

でも・・・これじゃ不便すぎますよね！

6.動画コントロールバーの表示をコントロールする

もう少し使える形で埋め込み動画のコントロールバーの表示を操作したいときに便利なパラメーターです。

6-1.動画コントロールバーを常時表示されたままにする

追記するパラメーター：autohide=0

動画のコントロールバーが常時表示されたままになります。

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?autohide=0" frameborder="0" allowfullscreen></iframe>

操作性は向上しますが、視認性が・・・。ジャマですよね。^^;

6-2.最初は非表示で再生中はスライド表示させる

追記するパラメーター：autohide=1

最初は動画コントロールバーが非表示で、再生中はマウスカーソルを乗せることでスライドイン・アウトで表示させることができます。

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?autohide=1" frameborder="0" allowfullscreen></iframe>

これが一番オススメかもしれません。(^o^)／

6-3.動画のシークバーのみ細くなる

追記するパラメーター：autohide=2

動画の再生位置を表している赤いシークバーのみが細くなったり太くなったりします。

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?autohide=2" frameborder="0" allowfullscreen></iframe>

あまり効果ないかな？？

7.動画コントロールバーの色を変更する

埋め込んだ動画のコントロールバーの色が、ページの雰囲気に合っていないときに変更できるパラメーターです。
とはいっても、２色しかありませんけどね。^^;

初期値は「黒」になっています。

黒いコントロールバー（初期値）

追記するパラメーター：theme=dark
もしくは何も追記しない。

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?theme=dark" frameborder="0" allowfullscreen></iframe>

サンプル動画は割愛します。

白いコントロールバー

追記するパラメーター：theme=light

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?theme=light" frameborder="0" allowfullscreen></iframe>

ホラ、白いコントロールバーになりましたよね。(^o^)

8.シークバーの色を変更する

通常は赤い動画再生のシークバーの色を変更するパラメーターです。
とはいっても、これも２色しかありません。^^;

もちろん初期値は「赤」になっています。

赤いコントロールバー（初期値）

追記するパラメーター：color=red
もしくは何も追記しない。

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?color=red" frameborder="0" allowfullscreen></iframe>

サンプル動画は割愛します。

白いコントロールバー

追記するパラメーター：color=white

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?color=white" frameborder="0" allowfullscreen></iframe>

再生してみるとシークバーが白くなったのがわかります。

9.オススメのパラメーターセット

YouTube動画を埋め込んだページから、YouTube側の再生ページへ読者の離脱を可能な限りくい止めるパラメーターのセットになります。

<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?showinfo=0&modestbranding=1&autohide=1" frameborder="0" allowfullscreen></iframe>

マウスオーバーすると右下にYouTubeのロゴが出て、YouTube側の再生ページへのリンクになっていますので、完全には防げませんね。
残念。




次回はYouTube埋め込み動画の再生に関するのカスタマズをお届けします。

それではまた。
(´∀｀*)ﾉｼ　ﾊﾞｲﾊﾞｲ

【オヌヌメ】

ＹｏｕＴｕｂｅで食べていく〜「動画投稿」という生き方〜 (光文社新書)

日本で最も動画共有サイトの立ち上げに携わってきたビデオブロガーが、トップクリエイターたちの成功・失敗談から動画投稿ビジネスについて考える。

このブログの目次