[2023年] iframeでYouTube動画を埋め込む方法

2023-02-20

WebサイトにYouTube動画を埋め込む方法として、iframeを使ったものが主流かと思います。
仕様変更された箇所などを毎回忘れるので自分用にまとめなおしました。

公式ドキュメント： https://developers.google.com/youtube/player_parameters?hl=ja

基本の埋め込み方法（HTML・CSS）

YouTubeのサイト上で、動画再生画面の「共有」→「埋め込む」を選択すると <iframe> タグがコピーできます。
レスポンシブに対応するために必要なHTMLとCSSはこちらです。

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/4WXs3sKu41I" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

.youtube{
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%; /* 16:9 (9÷16=0.5625) */
}
.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

プレビュー：

パラメータを設定する

<iframe src="https://www.youtube.com/embed/ビデオID"> に続けてパラメータを指定することで、自動再生やミュート、ループ等の設定ができます。
以下は、個人的によく使うパラメータを全て設定した状態です。後ほど1つずつ解説します。

<div class="youtube">
  <iframe src="https://www.youtube.com/embed/4WXs3sKu41I?autoplay=1&mute=1&controls=0&rel=0&loop=1&playlist=4WXs3sKu41I
" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!--
※下記はパラメータ部分を見やすく改行したもの
<iframe src="https://www.youtube.com/embed/4WXs3sKu41I
?autoplay=1
&mute=1
&controls=0
&rel=0
&loop=1
&playlist=4WXs3sKu41I
">
-->

プレビュー：

autoplay=1

デフォルトは「0」。　「1」で自動再生を有効にします。

info 2023年2月現在、このパラメータが指定してあってもスマホでの自動再生はできません。
(iOS15.5 Safari, Chromeで確認)
※ うろ覚えメモ：YouTube APIを使えば自動再生は可能ですが、ブラウザバック時や画面ロック時は停止され、ユーザがもう一度再生ボタンを押さない限り再生されません

mute=1

デフォルトは「0」。　「1」で再生時にミュート状態になります。

controls=0

デフォルトは「1」。　「0」で、シークバー等のコントローラーを非表示にします。

rel=0

動画の停止時や、動画終了時に表示される「関連動画」の設定です。
デフォルトは「1」で、「0」にした場合は表示した動画と同じチャンネルから関連動画を表示できます。

info 2023年2月現在、関連動画自体を非表示にする方法はありません。
元々 rel=0 が関連動画を表示させない設定でしたが、2018年9月に仕様変更されました。
※ うろ覚えメモ：YouTube APIを使っても非表示にはできません。

loop=1&playlist=ビデオID

同じ動画をループ再生させたい場合、loop=1&playlist=ビデオID をセットで指定します。
ビデオID部分は、<iframe src="https://www.youtube.com/embed/ビデオID"> と同じIDを入れます。

その他、仕様変更などの覚書

showinfo パラメータは廃止済み
動画再生時に上部に表示されるタイトル等を消すために showinfo=0 というパラメータが使われていましたが、2018年9月に廃止されています。