YouTubeの動画をWebサイトに表示したい場合、埋め込みコードを使えば簡単に動画を埋め込むことができます。
今回は、YouTube動画をWebサイトに埋め込む時にパラメータ（オプション）を指定して表示をカスタマイズする方法をご紹介したいと思います。
INDEX
YouTube動画埋め込みのパラメータ（オプション）の指定方法
YouTubeの動画埋め込みコードは、下記のようなiframeタグによって記述されています。
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
></iframe>上記のコードのsrcに指定されているURLにパラメータを記述することで、YouTube動画プレイヤーの様々なカスタマイズが可能です。
例えば、関連動画を非表示にしたい場合は、下記のようにURLを変更します。
また、複数のパラメータを指定したい場合は、「&」でつなげて記述することができます。
Youtube動画埋め込みの主なパラメータ（オプション）一覧
YouTubeの動画埋め込みで利用できる主なパラメータには、下記のようなものがあります。
- コントロールを非表示にする（controls）
- 自動再生する（autoplay）
- ミュートにする（mute）
- ループさせる（loop）
- 時間を指定する（start/end）
- iOSでインライン再生させる（playsinline）
- YouTubeロゴの非表示（modestbranding）
- キーボード操作の無効化（disablekb）
- 字幕の表示（cc_load_policy）
- 字幕のデフォルト言語を指定（cc_lang_pref）
- 他のチャンネルを関連動画に表示させない（rel）
それぞれ使い方をご説明していきます。
コントロールを非表示にする：controls
YouTubeの動画をWebサイトに埋め込んだ場合、動画の下部に再生/停止や再生位置、音量などを設定するコントロールが表示されますが、埋め込みコードのURLの末尾に?controls=0という記述を加えると上記のようにコントロールを非表示にすることができます。
表示例
自動再生する：autoplay
YouTube動画埋め込みを自動再生させたい場合は、?autoplay=1という記述をURLの後ろに加えれば自動で再生するように設定できます。
ミュートにする：mute
Webサイトに埋め込んだYouTubeの動画をデフォルトでミュートに変更したい場合は、?mute=1という記述を加えればデフォルトでミュートに設定することができます。
ユーザーが自分で音量を変更することは可能なので、その点はご注意ください。
表示例
ループさせる：loop
あまり利用頻度は高くないかもしれませんが、動画埋め込みコードのURLの末尾に?loop=1&playlist=VIDEO_IDという記述を加えると、動画をループ再生させることができます。
例えば、背景動画にYouTubeの動画埋め込みを利用するような場合などは、このパラメータを利用するといいでしょう。
表示例
時間を指定する：start/end
動画埋め込みコードのURLの末尾に、?start=20&end=30のような記述を加えると、動画の再生位置を指定することができます。
表示例
長い動画をWebサイトに埋め込みする場合で、特定の箇所を見てもらいたい場合にはこのパラメータを活用するといいでしょう。
startとendの値はそれぞれ動画の先頭からの秒数となっているので、再生したい位置の秒数を確認して設定してください。
iOSでインライン再生させる：playsinline
通常、iOSのSafariでYouTubeの埋め込み動画を再生すると自動的に全画面表示へと切り替わりますが、埋め込みコードのURLの末尾に?playsinline=1という記述を加えると、全画面に切り替えずに動画を再生することができます。
表示例
YouTubeロゴの非表示：modestbranding
埋め込み動画にYouTubeのロゴを表示させたくない場合は、URLの末尾に?modestbranding=1という記述を追加します。
表示例
キーボード操作の無効化：disablekb
埋め込み動画でキーボード操作を無効にしたい場合は、URLの末尾に?disablekb=1という記述を追加します。
表示例
字幕の表示：cc_load_policy
埋め込み動画で字幕の表示をデフォルトで有効にしたい場合は、URLの末尾に?cc_load_policy=1という記述を追加します。
ただし、字幕が設定されていない動画では表示することができないのでご注意ください。
表示例
字幕のデフォルト言語を指定：cc_lang_pref
埋め込み動画のデフォルト言語を指定したい場合は、URLの末尾に?cc_lang_pref=enのような記述を追加します。日本語を指定したい場合は、?cc_lang_pref=jaとなります。
他のチャンネルを関連動画に表示させない：rel
以前はYouTube動画埋め込み時に関連動画を非表示にすることができましたが、現在は関連動画を非表示にすることはできません。
ただし、URLの末尾に?rel=0という記述を追加することで、表示される関連動画を再生されている動画と同じチャンネルに限定することが可能です。
表示例
YouTube動画埋め込みのサイズを変更する
YouTubeの埋め込みコードの中には、「width」「height」という属性が含められています。
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
></iframe>例えば、800×450というサイズで動画プレイヤーを表示したい場合は、下記のように数値を指定することでサイズを変更することができます。
<iframe
width="800"
height="450"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
></iframe>また、CSSによってスタイルを調整することも可能で、レスポンシブ対応させることもできます。
パラメータ（オプション）を使っても解決しない場合は
パラメータ（オプション）を設定しても期待通りに動画を埋め込みできない場合は、YouTube以外の他のサービスを検討してみてください。
例えば、Vimeoの場合有料プランに登録することでVimeoのロゴ、再生バー、全画面表示のボタンなどを非表示にすることができます。
もしくは、videoタグを使って動画を表示する方法であれば、外部サービスを利用する場合よりもシンプルに動画を表示することができます。
