TOP > Webサービス > title - YouTubeの埋め込みに関わるパラメーターについてまとめてみた

ITやモバイル機器、iPhone、手帳や本など。
MENU

YouTubeの埋め込みに関わるパラメーターについてまとめてみた

2016052100.png



情報管理LOGの@yoshinonです。
YouTubeをサイトやブログに埋め込むときに、実はデフォルト以外にも様々なパラメーターが存在します。今回は、ベーシックなものから、マニアックなものまで含めて、まとめてみました。

  
【 YouTubeの埋め込みに関わるパラメーターについてまとめてみた 】  

 1.基本的なパラメーターと構造

 2.パラメーターの記述方法

 3.パラメーター一覧

 4.埋め込み実例






checkmark.png 1.基本的なパラメーターと構造

YouTubeをサイトやブログなどに埋め込むときには、このようなタグでやると思います。

<iframe width="400" height="270"; src="https://www.youtube.com/embed/動画のID" frameborder="0"; allowfullscreen></iframe>

基本的な構造としては、

width="○":幅の指定
height="○":高さの指定
https://www.youtube.com/embed/動画のID
frameborder:0の場合は、枠線無し。1の場合は、枠線あり。
allowfullscreen:記述ありの場合は、全画面表示あり。記述無しの場合は、全画面表示無し。


となっています。
ここまでは、基本のキということで。




checkmark.png 2.パラメーターの記述方法

パラメーターを設定するにあたって、以下のように記述するということをおさえておきたいと思います。

src="https://www.youtube.com/embed/動画のID?パラメーター=パラメーターの値&パラメーター=パラメーターの値&パラメーター=パラメーターの値"

というように、動画のIDのすぐ後ろに?をつけ、各パラメーターは、

パラメーター=パラメーターの値

と記述します。そして、複数のパラメーターを記述する場合は、&(アンバサダー)で結べばよいのです。

また、最低でも動画のサイズが、200px×200px以上の大きさでないと、各パラメーターが正常に動きません





checkmark.png 3.パラメーター一覧

というわけで、YouTubeで指定できるパラメーターをまとめてみました。基本的にiframeに対応しているものをメインにしています。

パラメーター名パラメーターの値説明
autohide 2 動画の進行バーの表示が消えますが、プレーヤー コントロール(再生ボタン、ボリューム コントロールなど)は表示されたままになります。
1動画の再生を開始して数秒後に、動画の進行バーとプレーヤー コントロールが非表示になります。これらが再び表示されるのは、ユーザーが動画プレーヤーにカーソルを合わせるか、キーボードのキーを押した場合のみです。
0動画の進行バーとプレーヤー コントロールは動画が終了するまで全画面表示で表示されます。
autoplay0自動再生しない
1自動再生する
cc_load_policy11 に設定すると、ユーザーが字幕をオフにしていても、字幕がデフォルトで表示されます。
colorred動画進行バーに赤色になる。
white動画進行バーに白色になる。
themedarkコントロールバーが、暗色になる。
lightコントロールバーが、明るい色になる。
controls0コントロールが表示されない。
1コントロールがすぐに表示される。
2ユーザーが動画の再生を開始した後にコントロールが表示される。
disablekb0キーボード操作できる。
1キーボード操作できなくなる。
start 動画の再生スタート位置を秒で指定
end 動画の再生終了位置を秒で指定
fs0全画面表示ボタンが表示されない。
1全画面表示ボタンが表示される。
hljp_JPインターフェイスの言語設定。
iv_load_policy1アノテーションを表示。
3アノテーションを非表示。
loop0繰り返し再生しない。
1繰り返し再生する。
modestbranding0YouTubeのロゴを表示。
1YouTubeのロゴを非表示。
playlist動画IDカンマで動画IDを区切ったリストを入力すると、その動画が再生されていく。
playsinline0iOS上で全画面再生する。
1iOS上でインライン再生する。
rel0動画再生終了後に関連動画を表示しない。
1動画再生終了後に関連動画を表示する。
showinfo0動画のタイトルやアップロードユーザーを表示しない。
1動画のタイトルやアップロードユーザーを表示する。







checkmark.png 4.埋め込み実例

というわけで、パラメーターの文字だけ見ていても分からないので、実例としていくつか貼っておきたいと思います。

最近、すごい!と思った動画です。

こちらが、デフォルトの状態の動画。



こちらが、以下のパラメーターを指定した動画です。同時に再生してみると、その違いが分かるはずです。



autohide=0: 動画が終了するまでコントロールを表示せず、全画面表示
controls=0:コントロールが表示されない。
color=white:動画進行バーに白色に
disablekb=1:キーボード操作できなくなる。
modestbranding=1:YouTubeのロゴを非表示。
playsinline=0:iOS上で全画面表示。
rel=0:関連動画を表示しない。
iv_load_policy=3: アノテーションを非表示。
showinfo=0:動画のタイトルやアップロードユーザーを表示しない。





eyeglass2.png 情報管理LOGの眼
 YouTubeの埋め込みは奥が深い

今回、YouTubeの埋め込みについて調べていくと、なかなか奥の深い世界であることが分かりました。そして、これだけのパラメーターがいじれたならば、かなり自由度が高く、応用範囲が大きいと言えるかと思います。

YouTubeは、いじりがいのあるツールですね。

関連記事

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:http://hokoxjouhou.blog105.fc2.com/tb.php/592-535fc139
該当の記事は見つかりませんでした。
SEO
loading
情報管理LOG