YouTubeの埋め込みで再生後に関連動画を表示しないようにする

YouTubeの埋め込みを行う際、再生後に表示される関連動画を出さないようにしたいということがあったので、対応方法をメモ。

サンプルコード

まずは特に設定しないで埋め込んでみます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/9jF60mq9Qdk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

この場合は動画再生完了後に関連動画が表示されてしまいます。
対応前のデモページ

まずはrelパラメータを試してみます。
埋め込むURLの末尾に?rel=0を追加します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/9jF60mq9Qdk?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

以前はこのパラメータで動画を非表示にできていたのですが、仕様変更により関連動画が表示されてしまいます。
rel=0を付与するデモページ

次にYouTubeのIFrame Player APIを使ってrelを付与する形でも試してみます。

<div id="movie"></div>

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
  let ytplayer = new YT.Player('movie', {
    width: 560,
    height: 315,
    videoId: '9jF60mq9Qdk',
    playerVars: {
      rel: 0
    }
  });
}

この場合も先ほどと同様で関連動画が表示されました。
rel=0を付与するデモページ2

色々と検討した結果、動画の再生が完了したタイミングでstopVideo()で最初の状態に戻すと関連動画を非表示にできそうでした。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
  let ytplayer = new YT.Player('movie', {
    width: 560,
    height: 315,
    videoId: '9jF60mq9Qdk',
    events: {
      'onStateChange': onPlayerStateChange
    }
  });

  function onPlayerStateChange(e) {
    if(e.target.getPlayerState() === 0) {
      ytplayer.stopVideo();
    }
  }
}

再生終了後の関連動画を非表示にするデモページ