Youtubeの動画を自分のサイト・ブログに埋め込む際のプレーヤー表示のカスタマイズ方法

medium_4481461680photo credit: Rego – d4u.hu via photopin cc

Youtubeの動画を自分のサイトやブログに貼り付ける場合に 表示の仕方を色々とカスタマズすることがきます。ここでは、その方法をメモしておきます。

動画埋め込みタグの基本

iframe版コードとobject版コード

Youtubeの埋め込みには、iframe版コード(現在の埋め込みコード)と、object版コード(以前の埋め込みコード)があります。
現状どちらも選択可能なのですが、object版というのは”Flashにのみ対応”したものであるため iphoneなどでは再生ができません。試しに同じ動画の埋め込みコードをiframe版コード、object版コードでそれぞれ貼り付けてみると…

・iframe版

・object版

PCで確認しても何も違いはないと思いますが iphoneで確認すると下の画像のようになります。

iphone_youtube

なので、わたくしは基本的にiframe版のみを使用しています。
以下このページではiframe版コードを前提に説明をしていきます。

埋め込みタグの基本形式

埋め込み用のタグは基本的に以下の形式になっていいます(見やすく改行してます)。

tag
・1=プレーヤーのサイズ(width=横幅、heght=縦幅)
・2=動画のURL(波線部分が各動画固有のID)
・3=iframeを囲む枠線の幅
・4=フルスクリーン表示

カスタマイズ表示において特に大事なのが2の部分です。
Youtubeの埋め込み動画では、固有IDに続けて 表示方法に関するパラメータを追記してあげることで プレーヤーの見栄えを設定することができます。

パラメータの基本的な記述方法

動画1:デフォルト

 
動画2:バーなどを非表示に

2つの動画は内容は先のものと一緒です。しかし下の方は待ち受け時に再生用のバーやタイトルなどが表示されないようにパラメータを追記しています(下の赤字部分)。

src=”//www.youtube.com/embed/eQ9dNe3kzJM?controls=0&showinfo=0&rel=0″

 
一見ただの適当な呪文のようにも見えますが、パラメータにはちゃんと意味があります。下の図を見てください。

tag_2

“?”が、ここから後ろはパラメータだよ~という意味ですね。
以後、「controls=0(コントロールバーの非表示)」「showinfo=0(タイトルバーの非表示)」「rel=0(関連動画の非表示)」という3つのパラメータが設定されており、間を「&」で繋いでいます。

つまり src=”//www.youtube.com/embed/~の部分は、単に動画のある場所を示すURLというだけではなく、動画の表示方法(パラメータ)を指示する命令文でもあるわけです。

以下で、具体的なパラメータをみていきましょう。

具体的なカスタマイズの方法

コントロールバーを非表示にする

デフォルト状態だと動画の下部に表示されるコントロールバーを非表示にするパラメータとしては「controls=0」「autohide=1」の2つの方法があります。

それぞれ待ち受け時の挙動は一緒(非表示)ですが、再生開始後に次のように表示されます。

・controls=0の場合・・・再生開始後も非表示のまま
・autohide=1の場合・・・再生開始後にマウスオーバーした場合にはコントロールバーが表示される

再生中も表示させない設定

src=”//www.youtube.com/embed/eQ9dNe3kzJM?controls=0

再生中にマウスオーバーすると表示される設定

src=”//www.youtube.com/embed/eQ9dNe3kzJM?autohide=1

よくありがちなエラー

パラメータを追加したが反映されない

いくつか原因は考えられますが、わたくしがやらかしていたのはパラメータの開始を意味する「?」を2個つけてしまっていたこと。

もともとタグの取得時に「動画が終わったら関連動画を表示する」のチェックが外れていると、URLのお尻に”?rel=0″のパラメータが書き加えられています。
なのでこれに気づかずに…

src=”//www.youtube.com/embed/eQ9dNe3kzJM?rel=0?controls=0″

みたいなことを書いてしまうと設定がうまく反映されません。

「?」はあくまでパラメータの開始位置だけ、各パラメータの接続は「&」になります。

2 件のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です