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>
（次ページ）
続いては、「繰り返し再生」や「画質調整」の方法などをご紹介！
