
YouTube埋め込み動画のカスタマイズ、後編でーす。
(´∀`)
こんにちは、ピアノ教室管理人です。
前回の「YouTubeの動画埋め込みコードのパラメーターまとめ1 - 見た目のデザインをカスタマイズ編」に引き続き、今回は「動画の再生をカスタマイズ編」になります。
埋め込みコードの基本については前回のココを参考にしてくださいませ。
ではさっそく行ってみましょう。
この記事の目次
- 関連動画のON・OFFのパラメーター
- 動画の自動再生のON・OFF
- 動画のループ再生のON・OFF
- 指定した秒数の位置から動画をスタートさせるパラメーター
- 指定した秒数の位置で動画を停止させるパラメーター
- 指定した範囲だけ動画を再生させるパラメーター
- 動画の画質を指定して再生させるパラメーター
- 埋め込み動画に字幕を付けるパラメーター
- 動画上のアノテーションの表示を消すパラメーター
- その他
1.関連動画のON・OFFのパラメーター

動画の再生が終わったときに関連する動画を表示するか・表示しないかを指定できます。
何もしなければ初期値は「関連動画を表示する」になっています。
埋め込むページによっては関連動画を表示したくないときがありますので、知っておくととても重宝します。
関連動画を表示する(初期値)
追記するパラメーター:rel=1
もしくは何も追記しない。
動画埋め込みコード例:
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?rel=1" frameborder="0" allowfullscreen></iframe>
あるいは
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q" frameborder="0" allowfullscreen></iframe>
サンプル動画:
再生終了後に複数の関連する動画が表示されますよね。
関連動画を表示しない
追記するパラメーター:rel=0
動画埋め込みコード例:
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?rel=0" frameborder="0" allowfullscreen></iframe>
サンプル動画:
これで再生終了後の関連動画が表示されなくなりました。
もっとも簡単な方法
関連動画の表示に関しては埋め込みコードを取得するときに、チェックボックスのON・OFFで切り替えることができます。

▲埋め込みコードの下にある「動画が終わったら関連動画を表示する」のチェックマークを入れた状態だと、関連動画を表示します。

▲チェックマークを外すと関連動画は表示されません。
コードにも「?rel=0」が追加されているのがわかると思います。(赤線部分)
パラメーターの追記・削除よりも簡単ですよね。
2.動画の自動再生のON・OFF

動画を埋め込んだページがブラウザに読み込まれると同時に、動画の再生を自動的に開始させるパラメーターです。
初期値は「自動再生しない」になっています。
セールスやプロモーション目的のページで訪問者にどうしても動画を見せたいときには使えますが、通常はあまり良くは思われませんので、使う際は注意が必要となりますよね。^^;
追記するパラメーター:autoplay=1
動画埋め込みコード例:
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?autoplay=1" frameborder="0" allowfullscreen></iframe>
サンプル動画:
コチラのページで確認してください。
※自動再生で音が出ますので注意してね。
3.動画のループ再生のON・OFF

動画が終わったら自動的に先頭に戻ってループ再生させるパラメーターです。
初期値は「ループ再生しない」です。
どういうときに使うんでしょうか?演出?
追記するパラメーター:loop=1&playlist=動画ID
動画IDはそれぞれの動画固有のIDで、埋め込みコードのURLの末尾に書いてあります。
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q" frameborder="0" allowfullscreen></iframe>
赤文字の部分が動画IDです。動画埋め込みコード例:
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?loop=1&playlist=L1b-9Tq-v1Q" frameborder="0" allowfullscreen></iframe>
サンプル動画:
上部の動画情報の左端に再生リストのボタンが追加されました。
本来は複数の動画を連続で表示させるためのパラメーターなんですね、これ。
4.指定した秒数の位置から動画の再生をスタートさせるパラメーター

好きなところから動画の再生をスタートさせることができます。
長い動画の一部とか、「ここから見て!」っていうときに使えますね。
追記するパラメーター:start=秒数
動画埋め込みコード例:
開始15秒後の位置からスタートさせてみます。
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?start=15" frameborder="0" allowfullscreen></iframe>
サンプル動画:
開始15秒後の位置から再生がスタートしましたね。
5.指定した秒数の位置で動画の再生を停止させるパラメーター

好きなところから動画の再生を停止させることができます。
長い動画の一部とか、「見るのはここまで!」っていうときに使えます、かね。^^;
追記するパラメーター:end=秒数
動画埋め込みコード例:
開始5秒後の位置で再生停止させてみます。
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?end=5" frameborder="0" allowfullscreen></iframe>
サンプル動画:
開始5秒後の位置で再生が停止しましたね。
6.指定した範囲だけ動画を再生させるパラメーター

上記の4と5の合わせ技。
見て欲しい範囲だけ動画を再生させることができます。
追記するパラメーター:start=秒数&end=秒数
動画埋め込みコード例:
開始10秒から15秒の間だけ再生させてみます。
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?start=10&end=15" frameborder="0" allowfullscreen></iframe>
サンプル動画:
これは使い道ありますね。^^
7.動画の画質を指定して再生させるパラメーター

YouTubeの動画の画質は通常インターネットの接続回線の速度や、表示されている動画のサイズに応じて勝手に調整されています。
なので、常に一番良い画質で視聴できるというわけではないんですねよ。
それを埋め込みコードにパラメーターを追記することで再生する動画の画質を指定できるようになります。
ただしムヤミに高画質を指定していると、読者の接続速度によっては負荷が高くなってしまいますのでご注意を。
追記するパラメーター:vq=画質の値
画質の値:
- highres ⇒その動画が再生できる一番の高画質
- hd1080
- hd720
- large
- medium
- small
動画埋め込みコード例:
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?vq=hd1080" frameborder="0" allowfullscreen></iframe>
サンプル動画:
コチラのページで確認してください。
※サンプルページはレスポンシブ対応じゃないので、かなり大きな動画が表示されます。
※このパラメーターの注意点
サンプルページを見てもらえればわかるように、再生させたい画質に対して、それに見合うサイズで動画を埋め込んでおかなければ上手くいかないようです。
- hd1080 ⇒1920px × 1080px
- hd720 ⇒1280px × 720px
- large ⇒854px × 480px
- medium ⇒640px × 360px
- small ⇒427px × 240
というような感じですね。
レスポンシブデザインやスマホ専用表示などで埋め込み動画のサイズが調整されてしまうと、指定した画質で再生されないことがあります。
ま、その検証に苦労したわけですが...。^^;
いろいろ謎が多いパラメーターです。
8.埋め込み動画に字幕を付けるパラメーター

読者の字幕設定に関わらず、再生させた動画に字幕を表示させることができます。
主に海外動画の紹介などで使えるかもしれません。
ただ、別に翻訳機能はついてないので、英語は英語の字幕になるだけですが。^^;
追記するパラメーター:cc_load_policy=1
動画埋め込みコード例:
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?cc_load_policy=1" frameborder="0" allowfullscreen></iframe>
サンプル動画:
正確かどうかはわかりませんが、字幕が付きましたね。^^
ちなみに日本語の動画は?
<iframe width="480" height="270" src="//www.youtube.com/embed/MUsNofHdilw?cc_load_policy=1" frameborder="0" allowfullscreen></iframe>
日本語動画では字幕は出ませんね。^^
(by AppBankMovie)
途中から英語喋っても・・・
<iframe width="480" height="270" src="//www.youtube.com/embed/DXMjDIE4Ct8?cc_load_policy=1" frameborder="0" allowfullscreen></iframe>
途中から英語(片言)喋っても、字幕は出ないぜ。MAJIDE
(by MEGWIN TV)
9.動画上のアノテーションの表示を消すパラメーター

アノテーションというのは、動画上に表示されるメモやコメントなどの注釈、あるいは他のページへのリンク、チャンネル登録リンクなどですね。
動画投稿者の使い方次第では、とてもインタラクティブな効果を発揮してくれます。
でも埋め込んだページではアノテーションを表示させたくないことも無きにしもあらず。^^;
そんなときはこのパラメーターを追記しましょう。
追記するパラメーター:iv_load_policy=3
※iv_load_policy=2
アノテーションのリンクだけ削除してくれるみたいなんですが、必ずしもそうはならないみたいで、効果がちょっとよくわかりません。
動画埋め込みコード例:
<iframe width="480" height="270" src="//www.youtube.com/embed/L1b-9Tq-v1Q?iv_load_policy=3" frameborder="0" allowfullscreen></iframe>
サンプル動画:
アノテーションありの動画
※わかりやすくするために上部の動画情報バーを非表示にしています。
動画左上に「<< Part1」、右上に「登録」というアノテーションが表示されています。
アノテーションなしの動画
※わかりやすくするために上部の動画情報バーを非表示にしています。
動画左上のある「<< Part1」と、右上にある「登録」が消えましたね。
(by eguri89games)
10.その他

そのほかイロイロ。
キーボードからの動画操作
YouTubeの埋め込み動画の再生は、実はキーボードから操作できるって知ってましたか?
何と、こんな操作ができるんです。
- スペースキー: 再生と一時停止
- 右矢印キー「→」: 現在の動画を 10% 進める
- 左矢印キー「←」: 現在の動画を 10% 戻す
- 上矢印キー「↑」: 音量を上げる
- 下矢印キー「↓」: 音量を下げる
これらのキー操作を無効にできるパラメーター「disablekb=1」もありますが、iframe版じゃない古い埋め込みコードにしか対応してないようです。
こんなパラメーターがあったらな〜
再生するときの音量を指定できるパラメーター・・・・ないんですよね、これが。
広告を非表示にして再生できるパラメーター・・・って、やっぱりないですよね。
というわけで以上です。
それではまた。
(´∀`*)ノシ バイバイ
【オヌヌメ】
2014年最新インターフェイス対応のYouTube解説書。たくさんの便利な機能を持っているYouTubeの便利な検索&動画閲覧から動画配信方法まですべての機能を丁寧に解説。