YouTubeの動画をWebページへ埋め込む | YouTube Player API

YouTubeの動画をWebページへ埋め込む

YouTubeの動画をWebページへ埋め込むには、対象の動画のページを開いて右クリックし「埋め込みコードをコピー」をクリックして、 Webページのソース内に「貼り付け」するだけで埋め込むことが出来ます。

（貼り付け 例）

<iframe width="639" height="360" src="https://www.youtube.com/embed/sQUZ0HPaYUs" 
    title="焚き火動画 ZenCamps NT Fire Stand" frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>

<iframe width="640" height="360" src="https://www.youtube.com/embed/JDRx2nGxWLY" 
    title="ゆる〜くソロキャンプ １泊目" frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>

「YouTube Player API」で動画をWebページへ埋め込む

「YouTube Player API」を使用するとJavascriptで多くの操作やカスタマイズを行うことが出来ます。

YouTube Player API がロードされると自動的にonYouTubeIframeAPIReady関数が呼び出されます。
ここで以下の引数を与えて YT.Player のコンストラクタを呼び出してインスタンスを作成します。

次にOnReady関数が呼び出されるので、
引数に1つ又は複数の Youtube動画ID を指定してloadPlaylist()関数を呼び出します。

「動画の再生準備が完了する」等Youtubeプレイヤーの状態が変更するとonStateChange関数が呼び出されます。
自動再生（ミュートしないと自動再生できない）したい場合はこの関数内にソースコードを記述します。

<div id="player" style="box-sizing:border-box; width:100%; height:auto; max-width:640px; aspect-ratio:16/9;"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
  let player;
  //YouTube Player API がロードされた際に自動的に「onYouTubeIframeAPIReady」関数が呼び出される
  function onYouTubeIframeAPIReady(){
    player = new YT.Player(
      "player",  //動画を表示する要素タグのIDを指定
      {
        //width: "639",height: "360", //CSSで設定しているので与えない
        events: {
          "onReady": onReady, // Youtubeプレーヤーが操作可能になった時に呼び出される関数を指定
          "onStateChange": onStateChange,  //Youtubeプレイヤーの状態が変化した時に呼び出される関数を指定
        }
      }
    );
  }
  function onReady(playerEvent){
    //Youtubeプレーヤーが操作可能になった時
    //再生リストをロードします
    playerEvent.target.loadPlaylist({
        playlist: ['sQUZ0HPaYUs', 'JDRx2nGxWLY',], // 動画IDの配列を指定
        index: 0,                   //再生を開始する動画リストのインデックス(0～)
        startSeconds: 0,            //再生を開始する位置（秒）
        suggestedQuality: 'highres' //推奨画質
    });
  }
  function onStateChange(playerEvent){
    //Youtubeプレイヤーの状態が変化した時

    if(playerEvent.data === YT.PlayerState.ENDED){
      //最後の動画リストの再生が終了
      player.playVideoAt(0); //最初の動画リストを再生

    }else if(playerEvent.data === YT.PlayerState.UNSTARTED){
      //動画がロードされたが再生前の状態
      //「ミュート」に設定しないと自動再生できない
      playerEvent.target.mute();      //ミュート
      playerEvent.target.playVideo(); //動画を自動再生
    }
  }
</script>

YouTubeプレイヤーの状態遷移

function onStateChange(playerEvent)の「playerEvent.data」を確認すると、どのような状態に遷移したかわかります。

  function onStateChange(playerEvent){
    //Youtubeプレイヤーの状態が変化した時
    if (playerEvent.data === YT.PlayerState.PLAYING){
      console.log("Playing");  //再生が開始された
    }else if(playerEvent.data === YT.PlayerState.ENDED){
      console.log("Ended");  //最後の動画リストの再生が終了
    }else if(playerEvent.data === YT.PlayerState.PAUSED){
      console.log("Paused");  //一時停止になった
    }else if(playerEvent.data === YT.PlayerState.BUFFERING){
      console.log("BUFFERING");  //バッファ中になった
    }else if(playerEvent.data === YT.PlayerState.UNSTARTED){
      console.log("UNSTARTED");  //動画がロードされたが再生前の状態
    }else if(playerEvent.data === YT.PlayerState.CUED){
      console.log("CUED");  //再生リストを使用していて次の動画が準備されている状態
    }
  }

「YouTube Player API」で使える関数（一部）

実例

<div id="player" style="box-sizing:border-box; width:100%; height:auto; max-width:640px; aspect-ratio:16/9;"></div>
<div style="display:flex;">
  <div id="sec" style="border:1px solid #666;padding:8px;">0/0</div>
  <div id="info" style="border:1px solid #666;padding:8px;"></div>
</div>
<button onclick="playVideoAt(0)">1つ目の動画の0秒目へ</button><button onclick="playVideoAt(1)">2つ目の動画の0秒目へ</button><br>
<button onclick="seekTo(0)">0秒目にスキップ</button><button onclick="seekTo(200)">200秒目にスキップ</button><br>
<button onclick="setPlaybackRate(0.25)">1/4倍速</button><button onclick="setPlaybackRate(1)">1倍速</button>
<button onclick="setPlaybackRate(2)">2倍速</button><br>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
  let player;

  //YouTube Player API がロードされた際に自動的に「onYouTubeIframeAPIReady」関数が呼び出される
  function onYouTubeIframeAPIReady(){
    player = new YT.Player(
      "player",  //動画を表示する要素タグのIDを指定
      {
        playerVars: {
            modestbranding: 0, //YouTubeロゴを非表示
            rel: 0,            //再生後や一時停止時に表示される関連動画を同じチャンネルに限定
            playsinline: 1,    //iOSでもインライン再生
            controls: 1,       //コントロールを表示
        },
        //width: "639",height: "360",
        events: {
          "onReady": onReady,              //操作可能になった時に呼び出される関数を指定
          "onStateChange": onStateChange,  //状態が変化した時に呼び出される関数を指定
        }
      }
    );
    setInterval(function(){
      if(player&&player.getCurrentTime){
        document.querySelector("#sec").innerText = 
          Math.trunc(player.getCurrentTime()) + "/" + Math.trunc(player.getDuration());
      }
    },500);
  }
  function onReady(playerEvent){
    //Youtubeプレーヤーが操作可能になった時
    //再生リストをロード
    playerEvent.target.loadPlaylist({
        playlist: ['sQUZ0HPaYUs', 'JDRx2nGxWLY',], // 動画IDの配列を指定
        index: 0,                   //再生を開始する動画リストのインデックス(0～)
        startSeconds: 0,            //再生を開始する位置（秒）
        suggestedQuality: 'highres' //推奨画質 small medium large hd720 hd1080 highres default
    });
    playerEvent.target.setVolume(50); //ボリューム設定
  }
  function onStateChange(playerEvent){
    //Youtubeプレイヤーの状態が変化した時
    if (playerEvent.data === YT.PlayerState.PLAYING){
      //再生が開始された
      getVideoData();
    }else if(playerEvent.data === YT.PlayerState.ENDED){
      //最後の動画リストの再生が終了
      player.playVideoAt(0); //最初の動画リストを再生
    }else if(playerEvent.data === YT.PlayerState.PAUSED){
      //一時停止になった
    }else if(playerEvent.data === YT.PlayerState.BUFFERING){
      //バッファ中になった
    }else if(playerEvent.data === YT.PlayerState.UNSTARTED){
      //動画がロードされたが再生前の状態
      //「ミュート」に設定しないと自動再生できない
      playerEvent.target.mute();      //ミュート
      playerEvent.target.playVideo(); //動画を再生
    }else if(playerEvent.data === YT.PlayerState.CUED){
      //再生リストを使用していて次の動画が準備されている状態
    }
  }
  function playVideoAt(idx){
    player.playVideoAt(idx);
  }
  function seekTo(sec){
    player.seekTo(sec);
  }
  function setPlaybackRate(rate){
    player.setPlaybackRate(rate);
  }
  function getVideoData(){
    let info=player.getVideoData();
    document.querySelector("#info").innerText = info.title + "/" + info.author;
  }
</script>