This post is also available in:
English
はじめに
本記事ではYouTubeの埋め込みコードのカスタマイズ方法を紹介します。ワードプレスブログやメディアの運営において、動画訴求を行う場合によりキメ細やかな設定ができるようになります。
参考：YouTube動画のワードプレスへの基本的な埋め込み方法に関してはこちらの記事で紹介をしています。
関連記事
はじめに
ブログやメディアの運営においても動画の訴求力は非常に高いものがあります。本記事ではYouTube動画をワードプレスメディアに埋め込む方法を紹介します。中身を覚えれば非常に簡単に動画をアップロードすることができます。
事[…]
この記事でわかること
この記事でわかることは主に以下です。
- 自動再生の設定方法がわかる
- レスポンシブの設定方法がわかる
- 字幕の自動表示の方法がわかる
- YouTubeロゴを非表示にする方法がわかる
- 関連動画を非表示にする
- 全画面表示を無効にする etc.
YouTubeの埋め込みコードの基本
YouTubeの埋め込みコードは「共有 > 埋め込む」をクリックすると以下のような画面で表示がされます。
以下がデフォルトのコードの例です。
<iframe width=”幅サイズ” height=”高さサイズ” src=”https://www.youtube.com/embed/動画ユニークのID” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
このコードにカスタマイズをするために「パラメーター」を設定します。パラメーターの指定によって、自動再生をしたりなど各種の指定をすることができます。パラメーターは動画ユニークID直後に「?」をつけます。
具体的に見てみると以下のようなイメージです。
<iframe width=”幅サイズ” height=”高さサイズ” src=”https://www.youtube.com/embed/動画ユニークのID?XXXXX=1” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
「?XXX=1」におけるXXXの部分がパラメーターとなります。「=」直後の「1」はONで「0」はOFFを意味します。このパラメーターによって各種動作の指定ができます。
動画ユニークID直後に ?XXX=1 などのルールでパラメーターをつける
指示が1つの時は上記のルールで終わることができますが、例えば、自動再生かつ字幕を表示するなど複数の指示が入る時は「&」でパラメーター同士をつなぎます。例えば、www.youtube.com/embed/動画ユニークのID?XXXXX=1&ZZZZZ=0&VVVVV=1″といったイメージです。
パラメーターを複数指定する場合は「&」でつなぐ
以上が基本的なパラメーターのルールになります。
動画を自動再生する
動画を自動再生する場合は、「autoplay=1」を入力します。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?autoplay=1” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
サンプルはこちらです。
関連動画を非表示にする
通常、YouTubeでは動画の再生が終わると関連する動画がレコメンドされます。別のチャンネルに離脱してしまうため関連動画を表示させたくないというケースにうってつけのパラメーターがあります。「?rel=0」を付与します。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?rel=0” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
指定位置から動画を開始する
「start=開始位置」で指定した位置からYouTube動画を開始することができます。時間は秒で指定をします。例えば、1分なら「start=60」で、2分なら「start=120」といった具合です。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?start=20″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
指定位置で動画を終了する
今度は反対に指定した位置で動画を終了させるケースのパラメーターを紹介します。「end=終了位置」で指定をすることができます。例えば、30秒で終了させる時は「end=30」となります。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?end=30″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
指定の区間だけ動画を表示する
応用編として上記２つの時間を掛け合わせると、指定の区間の動画表示を指示することができます。例えば、10秒から始まって20秒で終わる場合は「start=10&end=20」といった具合です。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?start=10&end=20″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
（次ページ）
続いては、「繰り返し再生」や「画質調整」の方法などをご紹介！
動画を繰り返し再生する
動画を繰り返し再生させるパラメーターは「loop=1&playlist=[ユニークID]」 です。ユニークIDは「www.youtube.com/embed/q4Ujc55WDTE」でいうところの「q4Ujc55WDTE」の箇所になります
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?loop=1&playlist=q4Ujc55WDTE” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
字幕を自動表示する
字幕を自動表示あるいは自動非表示させるコマンドは以下です。自動非表示は「cc_load_policy=0」で自動表示は「cc_load_policy=1」となります。視聴者が字幕表示をOFFの設定にしていてもパラメーターでONに設定すると字幕が表示されます。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?cc_load_policy=1” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
動画の画質を指定する
動画を任意の画質で指定する場合は「vq=値」を使います。例えば、高画質動画をそのまま再生してもらいたい時などに使います。ただし、画質指定は強制になってしまうため視聴者の閲覧環境によってはうまくワークしない場合もあるため注意が必要です。値には例えば以下が入ります。「highres」は、その動画の一番高い画質で表示されるようにする指定方法です。
- highres
- large
- medium
- small
- hd720
※largeは480p、mediumは360p、smallは240pとなります。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?vq=highres” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
アノテーションを非表示にする
コメントを表示する機能としてアノテーションがあります。アノテーションはオーバーレイで表示されるクリック可能なテキストをさします。埋め込みまでアノテーションを表示させたくない場合は以下のパラメーターを設定します。アノテーションに関しては非表示が「1」で表示が「3」であるためご注意ください。
アノテーションの非表示：「iv_load_policy=1」、アノテーションの表示：「iv_load_policy=3」
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?iv_load_policy=1” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
全画面表示を無効にする
全画面表示をさせたくない場合は「fs=0」を指定します。全画面表示アイコンが消えます。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?fs=0” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
YouTubeロゴを非表示にする
少し渋いですがYouTubeロゴを非表示にするパラメーターが「modestbranding=1」です。
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q4Ujc55WDTE?modestbranding=1″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
公式サイトでパラメーターリストが見れる
YouTube公式サイトでは他のパラメーターも一覧で紹介しています。
最後に
パラメーター設定によりYouTube動画もきめ細やかに埋め込みができることがおわかりいただけたかと思います。以上でYouTubeの埋め込みコードのカスタマイズ方法を終了します。動画自体の編集方法に関しては以下の記事におすすめサービスをまとめております。ぜひご覧ください。
関連記事
自社商品やサービスのプロモーションに、あるいは人材採用や社員教育に、ビジネスでの動画活用の重要性が高まっています。ビジネス用の動画といえば、ひと昔前は外注が一般的でした。しかし最近では、使いやすい動画編集ソフトが数多く開発されており、「内製[…]
関連記事
はじめに
ブログやメディアの運営においても動画の訴求力は非常に高いものがあります。本記事ではYouTube動画をワードプレスメディアに埋め込む方法を紹介します。中身を覚えれば非常に簡単に動画をアップロードすることができます。
事[…]
関連記事
はじめに
ワードプレスなどのサイトにおいて、レスポンシブ対応が直近では主流になっていますが、本記事では特にYouTube動画をレスポンシブ対応させる方法をお伝えします。
レスポンシブとは
[…]
関連記事
本記事ではYouTubeにアップロードされている音源をmp3に変換して保存する方法変換サイトをご紹介します。また、YouTubeダウンロードは気を付けるべき点を把握しないと違法ダウンロードになってしまうリスクがあります。本記事では、安全にダ[…]
