YouTubeのIFrame Player API で複数の動画を切替えて再生

IFrame Player API で複数のYouTube動画をそのエリア内で切り替えるTipsです。
2014年頃、別のブログで紹介したTipsを改良しました。
今回はテキストではなく、サムネイルを取得してクリックして切替→再生します。
タイトルの取得はYouTube Data API でないと取得できないので適当に設定するとセキュリティ的にリスクになるし、APIキー取らないといけないのでやめときますw
（同時再生は規約違反らしい…）

やりたい事
htmlのコード
CSS
javascript、jQueryのコード
参考サイト

やりたい事

同じエリア内に複数のYoutTube動画を切替え再生
関連動画を表示させない
サムネイルを取得

htmlのコード

id でdivタグを識別し、youtubeの動画読み込みのタイミングでiframeタグに置換します。
class=”movie_center”は、レスポンシブ用のCSSです。

<div class="movie_center">
<div id="movie-play"></div>
</div>
<ul id="movie-menu"></ul>

CSS

CSSはこちら（CSSリセット済み）余白などは各々調整を行ってください。
aspect-ratioプロパティを使っているので、IEは非対応です。詳しくはこちら↓
iframe(埋め込みタグ)のレスポンシブ、aspect-ratioプロパティが便利

.movie_center{
  margin: 2.0em auto 0;
}
.movie_center iframe{
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
}
#movie-menu{
	display: flex;
	justify-content: center;
}
#movie-menu li + li{
	margin-left: 5px;
}
#movie-menu img {
  aspect-ratio: 1.618 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 0;
  cursor: pointer;
}

javascript、jQueryのコード

こちらがjavascript、jQueryのコードになります。
IFrame Player API で、YouTube 動画プレーヤーをウェブサイトに埋め込むと、JavaScript でプレーヤーを制御できます。
ソースはこちらを参考にしました。
【ムービー】Youtube IFrame Player APIを利用してサムネイル画像クリックで動画再生

	//IFrame Player APIを呼び出す
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	
  //プレーヤーの準備
	let thumbInsert = '';
	let ytPlayer;
	let ytData = [
		{ id: '4YYf1-3UuSQ' },//youtubeのID
		{ id: 'WqRzR7ERTr4' },
		{ id: 'Ln-qYIu_QwY' },
		{ id: '-hGai6XXRz4' }
	];
	//サムネイル画像の埋め込み準備
	for(let i = 0; i < ytData.length; i++) {
		thumbInsert += '<li>';
		thumbInsert += '<img src="https://img.youtube.com/vi/' + ytData[i]['id'] + '/default.jpg" alt="">';
		thumbInsert += '</li>';
	}
  // 動画プレーヤーの読み込み
	window.onYouTubeIframeAPIReady = function() {
    ytPlayer = new YT.Player('movie-play', {
      height: '360',
      width: '640',
      videoId: ytData[0]['id'],
			playerVars:{
				rel: 0,//関連動画なし
				modestbranding: 1//YouTube ロゴなし
			}
    });
  }
	//動画の再生
	function play(ytId, seekTime) {
		ytPlayer.loadVideoById(ytId, seekTime);
	}

//サムネイルクリック
$(function() {
	$('#movie-menu').append(thumbInsert);
  /* 指定した動画を再生 */
	$('#movie-menu li img').on('click', function() {
		ytId = $(this).attr('src').replace('https://img.youtube.com/vi/', '');
		ytId = ytId.replace('/default.jpg', '');
		play(ytId, 0);
		return false;
	});
});