【 みんカラ 】ブログにYouTube動画を貼り付ける方法 2015年度版 Part２

前回のブログで、基本的な【 みんカラ 】ブログにYouTube動画を貼り付ける方法を紹介しましたが、YouTubeの動画埋め込みプレイヤーにはオプションのパラメータを YouTube 動画 SWF URL の末尾に追加することで、外観をカスタマイズしたり、動画を自動再生させたり、動画の再生開始位置や再生終了位置を指定する等といった裏技的な機能もあります。
（スマートフォンなどのように「Adobe Flash Player」がインストールされていないブラウザでは作用しないようですが。）
そこで今回はYouTubeの動画を貼り付ける際の裏技的なカスタマイズ方法（パラメータオプション）を紹介します。

まずカスタマイズする上で覚えなくてはならないHTMLコードの見方があります。
上記の埋め込み用のHTMLコードで、下線が引いてある部分がYouTube 動画 SWF の URLです。
その中の http://www.youtube.com/v/ と ? の間にある ***********部分の１１文字がその動画のVIDEO_ID（動画 ID）で、それ以降の ●●=値 とあるのがパラメータです。
そのパラメータの値を変えたり、新たなパラメータを設定する事によってカスタマイズする事ができます。
動画 ID以降のパラメータは省略することもできますが、その際はYouTubeが設定したデフォルト（初期設定）値になります。 複数のパラメータを指定する場合、間に &（若しくは&） を入れます。
因みに上記例のパラメーターは、

• version=3は、ＡＳ３プレイヤーで表示する。
• hl=ja_JPは、言語コードは日本語。
• rel=0は、動画再生が終わったら関連動画を表示しない

と言う事を意味してます。
また、width="580" height="326"は動画埋め込みサイズを幅"580"、高さ"326"ﾋﾟｸｾﾙの大きさに設定することを意味してます。
allowfullscreen="true"はフルスクリーン表示を許可することを意味しています。

◇ 動画埋め込みプレイヤーのタイプを指定するパラメータ

YouTube 動画プレイヤーには、Flash形式の動画プレイヤーActionScript 2 player，ActionScript 3 playerとHTML5形式の動画プレイヤーHTML5 player の３タイプのビデオプレーヤーがあります。
HTML5 playerは、これに対応したブラウザでは「Flash Player」がインストールされていなくても動画を再生でき、また再生速度を変えることもできるといった機能もあるのですが、残念ながら【 みんカラ 】ブログでは<iframe></iframe>タグの埋め込みコードを使う事が出来ないためこの動画プレイヤーで表示させることができません。
しかしながらAS2プレイヤーとAS3プレイヤーの使い分けは今ののところ可能です。
AS2プレイヤーとAS3プレイヤーの見た目の違いは動画コントロールバーのデザインと高さが若干違う程度ですが、デザインや機能をカスタマイズすることも可能です。
2012年5月のYouTube仕様変更によりAS3プレイヤーがデフォルトになりましたので、version=3を指定しなくても（省略しても）ActionScript 3 playerで表示されることになりました。
逆にAS2プレイヤーで表示したい場合には、version=2を指定する必要があります。

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

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

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

AS3プレイヤーの場合、動画コントロール バーの背景色はdark色とlight色の２種類しか選べませんが、AS2プレイヤーに於いては背景色と境界線の色を個別に好みの色に指定することができます。

このパラメータはAS2プレイヤーでしか有効になりませんですので、AS2プレイヤーで表示するためのパラメータversion=2を追加指定する必要があります。
境界線の色を変更するには&color1=0xffff00の&color1=0x以降の６文字の半角英数字部分を、指定したい色の「#（ハッシュ）」を除いた16 進数形式の RGB カラー値に変更します。
動画コントロール バーの背景色を変更するには&color2=0x25b7c0の&color2=0x以降の６文字の半角英数字部分を、指定したい色の「#（ハッシュ）」を除いた16 進数形式の RGB ｶﾗｰ値に変更します。

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

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

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

通常AS3プレイヤーのコントロール バーには、YouTubeサイトの動画単独ページにリンクするためのYouTubeのロゴが表示されていますが、modestbrandingパラメータの値を 1 に設定すると、これをコントロール バーに表示させないようにすることができます。ただし、動画を一時停止したときにユーザーがプレーヤーにカーソルを合わせると、動画の右上に引き続き小さい YouTube テキストラベルが表示されます。デフォルトでは、 0 に設定されています。

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

デフォルト値は 2 です。
このパラメータは、動画の再生が開始された後、動画コントロール バーを自動的に非表示にするかどうかを指定します。隠れた動画オコントロール バーはマウスを動画上に移動すれば一時的に再び表示されます。
YouTube動画埋め込みプレイヤーのデフォルト（autohide=2）の動作では、プレーヤーのサイズが16:9または4:3のアスペクト比を持つならば、ビデオ・プログレス・バー（動画の進行バー）とプレーヤー・コントロール（再生ボタン、ボリューム コントロールなど）が自動的に表示が消えますが、さもなければ、プレーヤー・コントロールは表示されたままになります。
このパラメータを 0 に設定すると、プレーヤーのアスペクト比に関係なく、動画の進行バーとプレーヤー コントロールは動画が終了するまで表示されます。
このパラメータを 1 に設定すると、プレーヤーのアスペクト比に関係なく、動画の再生を開始して数秒後に、動画の進行バーとプレーヤー コントロールが非表示になります。これらが再び表示されるのは、ユーザーが動画プレーヤーにカーソルを合わせるか、キーボードのキーを押した場合のみです。

◇ 動画コントロール バーを表示するかどうかを指定するパラメータ

デフォルト値は 1 です。
このパラメータ値を 0 に設定すると、埋め込みプレイヤーのアスペクト比やマウスを動画上に移動するに関わらず、動画コントロール バーを非表示にできます。
注: <IFrame>タグによる埋め込みの場合は、パラメータ値が 1 と 2 の場合のユーザー エクスペリエンスはまったく同じですが、controls=2 を指定すると controls=1 よりもパフォーマンスがよくなります。現在は、動画のタイトルのフォントサイズが異なるなど、2 つの値の間でプレーヤーの表示にまだ多少の相違があります。ただし、両方の値の間の相違がユーザーにまったくわからなくなった場合は、パラメータのデフォルト値が 1 から 2 に変更される可能性があります。
動画コントロール バーが非表示になっても、動画上でクリックもしくは、キーボードのスペースキーをクリックすると再生/一時停止できます。音量調整はキーボードの↑/↓のキーを押して操作することはできます。戻す/進めるは←/→のキーを押して操作することはできます。動画上でダブルクリックすると全画面表示になります。

◇ キーボード操作を無効にするパラメータ

デフォルトは 0 です。
このパラメータ値を 1 に設定するとプレーヤーをキーボードで操作できなくなります。
キーボードによる操作は次のようになります。

• スペースキー: 再生 / 一時停止
• ↑上矢印キー: 音量を上げる
• ↓下矢印キー: 音量を下げる
• ←左矢印キー: 現在の動画を 10% 戻す
• →右矢印キー: 現在の動画を 10% 進める

◇ 関連動画を表示するパラメータ

デフォルト値は 1 です。
最初の動画の再生が終了したときに、プレーヤーに関連動画を表示するかどうかを指定します。



文字数制限になったので「Part３」に続きます。（笑）