プレイヤーの見た目・デザインをカスタマイズする

動画が使われる場所は様々で、「いかにもYouTubeみたいな表示は嫌だ」「コントロールバーは出したいけれどYouTubeのロゴは出したくない」「タイトルもコントロールバーもいらない。動画だけを表示させたい」といった要望は多いのではないでしょうか。

今回は、動画を埋め込む際にそんな気になるデザイン面を中心とした表示の変更方法についてご紹介します。

YouTubeプレイヤーの配色を変えたり、タイトルバーを非表示にしたりすることで、埋め込まれるページのデザインに合わせることができ、サイトイメージを崩さずにYouTubeの動画を埋め込むことができます。

YouTubeのロゴを表示したくない

YouTubeプレイヤーの右下にはYouTubeのロゴが表示されています。
これはYouTubeに掲載している動画であることを示すだけでなく、クリックをするとYouTubeの動画ページへリンクする仕様となっています。

このロゴを非表示にする事で、訪問者の離脱の可能性を少しでも減らすことが出来るかもしれません。

【Before】 ロゴが表示され、クリックするとYouTubeへ移動してしまいます。	【After】 ロゴが非表示になり、YouTubeの動画というイメージも薄れます。
訪問者の離脱を減らす為と書きましたが、逆にYouTube（チャンネルなど）への流入を考える場合は表示をさせておくべきでしょう。特に指定をしなければ、ロゴは表示された状態で埋め込まれます。

＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?modestbranding=1"  width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

タイトルバーを表示したくない

動画のタイトルが重要でない、埋め込まれるページとの親和性が低い、動画をプレイヤー全体に表示したい場合など、タイトルバーを非表示にしたいこともあるかと思います。

動画のタイトルを正しく表示する方が訪問者への正しい配慮かもしれませんが、自身がアップロードしていない動画を紹介する場合などは、この指定が役に立つでしょう。

【Before】 強制的にタイトルバーが表示されます。	【After】 タイトルバーを非表示にできます。
通常、動画の再生が開始されればタイトルバーは隠れる仕様になっていますが、再生前からタイトルバーを表示したくない場合にこの指定が有効です。特に指定をしなければ、タイトルバーは表示された状態となります。

＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?showinfo=0"  width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

コントロールバーを表示したくない

ユーザーの利便性を考えれば、コントロールバーを非表示にするのはあまり得策とは言えないかもしれませんが、動画が埋め込まれるページのデザインや、その利用のされ方によってはコントロールバーが無い方がユーザビリティが高まるシーンもあるでしょう。

【Before】 コントロールバーが表示され、動画再生後に自動的に隠れます。	【After】 「再生」と「一時停止」は、動画をクリックで可能となります。
通常、動画が再生が開始されればコントロールバーは細いシークバーを残して隠れます。また、動画にマウスをのせればコントロールバーが再出現します。特に指定をしなければ、コントロールバーは表示された状態となります。

＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?controls=0"  width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

コントロールバーとシークバーを常に表示させたい

ここまでは、様々なものを隠す方法をご紹介しましたが、逆に、動画の再生が始まると隠れてしまうコントロールバーを常に表示させておく方法もご紹介します。

コントロールバーを常に表示させておくことで、動画のローディングの進行具合が把握出来たり、ボリュームの調整も直観的にでき、動画の再生時間も一目でわかるなど、ユーザーの利便性は非常に高まります。

【Before】 動画の再生が始まると、細いシークバーを残し、隠れてしまいます。	【After】 動画の再生が始まってもコントロールバーが常に表示されます。
通常でもマウスを重ねればコントロールバーが表示されますが、常に表示をさせる事でわかり易さは格段に向上します。

＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?autohide=0"  width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

コントロールバーとシークバーの色を変えたい

一番不満が多いと思われる、YouTubeプレイヤー外観については、少しですがカスタマイズが可能となっています。

黒や赤を主体としたYouTubeプレイヤーがページのデザインや動画自体にそぐわない場合などは、以下の様に変更してみるのも良いかもしれません。

【Before】 見慣れたデザインのYouTubeプレイヤーが表示されます。	【After】 コントロールバーやシークバーの色が変更されます。
変更できる色の種類は多くありませんが、既定のデザインとは違うものを利用する事で、訪問者に対して良い印象を与えられるかもしれません。

＜iframe src="//www.youtube.com/embed/7DGAoeMXBWM?theme=light&color=white"  width="560" height="315" frameborder="0" allowfullscreen＞＜/iframe＞

■YouTubeを見てもらう”一工夫”が大切

いかがでしたでしょうか。指定を少し加えるだけで通常とは違った見た目で動画の埋め込みが可能になります。

その動画や埋め込み先のページデザインに合わせた埋め込み方を指定する事で、YouTube動画の活用範囲がグッと広がり、その一工夫がユーザーの利便性を生み、伝えたいことがより一層伝わるようになるのだと思います。

前編と併せて二回に渡ってご紹介したパラメーターを用い、是非、効果的にYouTubeを活用してみてくださいね。