[js]埋め込みYoutube閲覧後に自動遷移を仕込む

元ネタがあるので活用メモ。

参考
活用（レスポンシブ）

参考

YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組み（IFrameプレーヤーAPI（JavaScript）） - WisdomMingle.com

YouTube動画の再生終了後にリダイレクトで別のページに自動的に移動させる仕組みの実例とカスタマイズ方法をお話します

サンプルファイルがあるので開いて、表示する動画と遷移先を設定すればローカルで動作確認可能。

記事は古いけど現役で動作する。javascript単体で組まれてるので導入も楽。

活用（レスポンシブ）

youtubeの埋め込みについて回るのはレスポンシブ対応。youtubeの埋め込みはiframeなので親に動的な表示領域を設定、iframeは幅と高さを100%にする。

今回のやつもiframeなので、そのまま流用できる。

通常
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JMZnLbZHN_0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

今回のやつ
<div class="youtube">
    <div id="iframe_player_api"></div>
</div>

.youtube{
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}
.youtube iframe{
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    right: 0;
}

おしまい。