WebサイトにYouTube動画を表示する：パラメータ制御編

「WebサイトにYouTube動画を表示する」第2弾 パラメータ制御編です。
前回は「基本編」と題して初歩的な実装方法についてまとめました。
今回は、埋め込んだ動画の再生方法をカスタマイズする方法についてご紹介します。

よく使用される機能として「ループ再生」や「再生位置調整」などが挙げられます。
また、ユーザーからの操作を一部制限する機能などもあります。
用途に合わせて適切なパラメータを設定しましょう。

設定方法

前回取得したコードのsrc属性末尾に文字列（パラメータ）を追加することで設定します。
パラメータは複数指定することができます。

一つ目のパラメータは動画IDの後ろに「?」をつけ、そのあとに文字列を追加します。
二つ目以降は、さらにそのあとに「&」をつけて続けます。
並びは好きな順番でかまいません。

※ 注：本記事は要点をわかりやすくするためsrc以外の属性を省略しています。
正確な記述方法は基本編を参照してください。

<iframe src="https://www.youtube.com/embed/動画ID?パラメータ01=値&パラメータ02=値&パラメータ03=値"></iframe>

パラメータ紹介と実装例

現在サポートされているパラメータの中から、特に使用されることが多い項目をパターン別に紹介します。（2021年6月時点）

参考：Player Parameters
YouTube Embedded Players and Player Parameters

リスト再生・ループ再生

動画をリスト化する、もしくはプレイリストを読み込み連続で動画を再生します。
また、よく併用される「ループ再生」もあわせて紹介します。

パラメータ	内容
playlist	再生する動画IDをカンマ区切りのリスト形式で指定します。
listType	listと組み合わせて、プレーヤーにロードするコンテンツを識別します。 リストの形式を指定します。
list	listTypeと組み合わせて、プレーヤーにロードするコンテンツを識別します。 listTypeの形式に応じて動画を指定します。
loop	単一ビデオプレーヤーの場合、最初の動画を何度も再生します。 再生リストプレーヤーまたはカスタムプレーヤーの場合、リスト全体を再生した後、最初の動画からもう一度再生が始まります。

playlist で任意の動画をリスト化する

playlistにカンマ区切りで動画IDを指定することで、記述した順にリスト化し動画を再生します。
/embed/の後に指定した動画が最初に再生され、その後playlistに指定した動画が再生されます。
/embed/後の動画IDを省略するとplaylistの一番始めの動画から再生されます。
ループさせたい場合はloopの値を 1 に設定します。

<div class="youtube">
  <iframe src="https://www.youtube.com/embed?playlist=Om2ahOYuiSg,c7X3rBsWBMY,mZCYg11O3zo&loop=1"></iframe>
</div>

listType & listでプレイリストを再生する

listTypeで形式を設定し、値に応じてlistにIDを指定します。
（listTypeには3種類【user_uploads・playlist・search】の値がありますが、今回はよく使用される"playlist"（プレイリスト）を例に紹介します。）

"listType=playlist"の場合、listにはプレイリストのIDを指定します。
YouTubeでプレイリストを開いたときのURLから確認できます。（”PL”から始まる文字列）

その他はplaylistパラメータと同様です。

<div class="youtube">
  <iframe src="https://www.youtube.com/embed?listType=playlist&list=PL590L5WQmH8eYTXiTTjzo4YnK7vkCqZTI&loop=1"></iframe>
</div>

単一動画をループさせる

ひとつの動画だけループさせる場合は、loopの設定に加えてplaylistに同じ動画IDを指定します。

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/eIW4zMLc-_4?playlist=eIW4zMLc-_4&loop=1"></iframe>
</div>

自動再生

読み込んだ動画を自動的に再生します。

パラメータ	内容
autoplay	値を 1 に設定すると、プレーヤーのロード時自動的に最初の動画が再生されます。
mute	値を 1 に設定すると、プレーヤーがミュート状態になります。
playsinline	値を 1 に設定すると、プレーヤーがインライン再生になります。

playsinlineについて、ここで言う「インライン再生」とは「動画が全画面表示にならずに再生される」という意味です。
この設定をすることで、表示領域を超えず動画が再生されるようになります。
再生時自動的に全画面になるスマートフォン表示時に有効な設定です。

注意点として、ユーザーが不便なく確認できる程度の領域は確保する必要があります。
最低でも200px × 200pxのビューポートが必要です。

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/JkOXWj_qZME?autoplay=1&mute=1&playsinline=1"></iframe>
</div>

再生位置調整

動画の開始位置、終了位置を指定します。

パラメータ	内容
start	動画の先頭から指定された秒数分進めた位置から動画を再生します。
end	動画開始からの時間（秒数）でその停止位置を指定します。

以下は「開始5秒後の位置からスタート、15秒後の位置で停止」を設定した例です。

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/DW61PpKJGm8?start=5&end=15"></iframe>
</div>

機能制限

ユーザーの操作を一部無効にします。

パラメータ	内容
controls	値を 0 に設定すると、プレーヤーのコントロールを表示しなくなります。
disablekb	値を 1 に設定すると、プレーヤーはキーボード操作に応答しなくなります。
fs	値を 0 に設定すると、全画面表示ボタンがコントロールバーに表示されなくなります。
modestbranding	値を 1 に設定すると、YouTube ロゴがコントロール バーに表示されなくなります。

以下は「全画面表示ボタン」と「YouTube ロゴ」を非表示に設定した例です。
他のプレーヤーと見比べてみてください。

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/mvoIQSd7C-w?fs=0&modestbranding=1"></iframe>
</div>

次回予告

今回は、Youtube動画のパラメータ制御についてご紹介しました。
次回は「JavaScriptでさらに細かく制御する」方法についてご紹介したいと思います。