YouTube 埋め込みプレーヤーの外観をカスタマイズ

お気付きの方も多いとは思いますが、最近 YouTube 動画コントロール バー のデザイン（色）がまた変わりました。YouTube のサイトでは先月からダーク色のコントロール バーになっていましたが、１１日からは埋め込みプレイヤーのコントロール バーも初期設定状態で全てダーク色に変更されました。
個人的な感想では、今回のデザイン変更はカッコ良くなっているので歓迎なのですが、黒い背景色のサイトに貼り付けた場合、AS3プレイヤータイプの埋め込みプレイヤーは良いのですがAS2プレイヤータイプの埋め込みプレイヤーでは見慣れない所為か何か変です。
そこで、YouTube では埋め込みプレイヤーの色などをパラメーターオプションで変えることが出来るので今回は埋め込 ​​みプレーヤーのコントロール バーの色などを変えるパラメーターを紹介したいと思います。


その前に基本的なYouTube 動画を【みんカラ】ブログに貼り付ける方法はこちらを、ＨＴＭＬコードでカスタマイズする方法はこちらを参照してください。

◇ YouTube 埋め込みAS3プレーヤー パラメータ

YouTube 埋め込みプレーヤーは、現在のところActionScript 2 player，ActionScript 3 player，HTML5 player の３タイプのビデオプレーヤーがあると５月のブログでも紹介しましたが、YouTube動画SWF URL のVIDEO_IDの後に パラメータversion=3を指定するとActionScript 3 playerで埋め込むことになります。
旧型のAS2プレイヤーとAS3プレイヤーでは下例のようにコントロールバーのデザインやサイズ（高さ）も変わっています。

◇ 動画コントロール バーの色を選択するパラメータ

このパラメータを使用すると、動画コントロール バーの色を選択することができます。前述したように現在では、動画コントロール バーの色がデフォルトでは黒っぽいdarkになっていますが、白っぽいlightにすることも可能です。有効なパラメータ値は、darkとlight。デフォルトでは、darkに設定されています。

◇ ビデオプログレスバーの色を選択するパラメータ

このパラメータは、ビデオプログレスバー（ビデオの進行状況バー）で使用される色を指定します。有効なパラメータ値は、redとwhite。デフォルトでは、ビデオプログレスバーの色はredに設定されています。
注：このパラメータは、AS2埋め込みプレイヤーではサポートされておりません。

◇ 動画コントロール バーの背景色と境界線のサブ カラーを設定するパラメータ

こちらはAS2プレイヤー限定のパラメータになりますが、 YouTube「埋め込みプレーヤー」には境界線（額縁）をつけたり、動画コントロール バーや境界線に任意の背景色を設定することができます。
borderパラメータの値を1に設定すると、動画プレーヤーの周りに境界線が表示されます。
境界線のメイン カラーは color1パラメータで、動画コントロール バーの背景色と境界線のサブ カラーは color2パラメータで設定できます。
背景色を表す値は 「#（ハッシュ）」を「0x」に置き換えた16 進数形式の RGB 値を記入します。

◇ YouTubeのロゴが表示されないパラメータ

通常AS3プレイヤーのコントロール バーには、YouTubeサイトの動画単独ページにリンクするためのYouTubeのロゴが表示されていますが、modestbrandingパラメータの値を1に設定すると、これをコントロール バーに表示させないようにすることができます。

◇ 動画コントロール バーを隠すパラメータ

このパラメータは、ビデオの再生が開始された後、ビデオコントロール バーを自動的に非表示にするかどうかを示します。隠れたビデオコントロール バーはマウスを動画上に移動すれば一時的に再び表示されます。
このパラメータ値を1に設定すると非表示にできますが、AS2プレイヤーとAS3プレイヤーでは若干隠れ方が違います。AS3プレイヤーではビデオの再生が開始された後にスライドしながらフェードアウトするのに対しAS2プレイヤーではＯＮ・ＯＦＦ的にフェードアウトします。
デフォルト値は2で、プレイヤー コントロール（再生ボタン、ボリュームコントロール、等）表示されたままにしながらビデオのプログレスバー（ビデオの進行状況バー）をフェードアウトする動作になります。
パラメータ値を0に設定すると、ビデオの進行状況バーおよびビデオプレーヤーのコントロールは、ビデオ全体に表示されます。

関連情報ホームページURL：

http://apiblog.youtube.com/2011/08/coming-soon-dark-player-for-embeds.html
https://developers.google.com/youtube/player_parameters?hl=en