YouTubeの動画埋め込み方法とパラメータ

YouTubeの動画をサイトへ埋め込む方法です。

iframeで埋め込む

一番簡単なやり方は下記のようにiframeタグでsrc属性に動画のURLを指定します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxxxx"></iframe>

APIで埋め込む

APIを使用して埋め込むこともできます。

<div id="video"></div>

<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
      height: '315',
      width: '560',
      videoId: 'B5avZSRWxP8'
  });
}
</script>

主なパラメータ

動画を埋め込む際にパラメータを使用することができます。

主なパラメータを紹介します。
その他のパラメータはYouTubeのリファレンスをご覧ください。

autoplay	動画を自動再生するかどうかの指定。 0：自動再生しない(デフォルト値) 1：自動再生する
controls	動画のコントロールを表示するかどうかの指定。 0：表示しない 1：表示する(デフォルト)
end	動画を特定の位置で停止させる場合に指定する。再生をしてからの秒数を正の整数で指定する。
loop	動画を繰り返し再生するかどうかの指定。 1つの動画を繰り返し再生するためには「loop=1&playlist=動画ID」とする必要がある。 0：繰り返し再生しない(デフォルト) 1：繰り返し再生する
fs	全画面表示ボタンを表示するかどうかの指定。 0：全画面表示ボタン非表示 1：全画面表示ボタン表示(デフォルト)
modestbranding	YouTubeロゴを表示するかどうかの指定。ただし、1を指定しても動画を一時停止したときにプレーヤーにカーソルを載せると画面右上に表示される 0：表示する(デフォルト) 1：表示しない
rel	2018年9月25日以降、仕様が変更されました。仕様変更前は動画再生終了後に関連動画を表示するかの指定ができ、0を設定すると関連動画を非表示にできましたが、仕様変更後は関連動画を非表示にできなくなり、0を設定した場合は再生動画と同じチャンネルから関連動画が選択されるようになりました。
showinfo	2018年9月25日以降は使用できなくなりました。以前は0を設定すると動画再生前の動画タイトルやユーザー情報を非表示にできました。
start	動画を再生開始する位置の指定。正の整数で指定する。

パラメータ設定例

パラメータを設定するためには動画URLのあとに「?パラメータ名=パラメータ値」とします。

パラメータを複数設定する場合は「&」を使います。

下記の例は、動画を自動再生かつ動画を繰り返し再生する例です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxxxxxx?autoplay=1&loop=1&playlist=xxxxxxxxxxx"></iframe>

デモ