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

やりたい事

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

    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;
    	});
    });

    参考サイト

    1. YouTube プレーヤーの埋め込み
    2. iframe 組み込みの YouTube Player API リファレンス

    ちなみに、この動画、Hayurakuの自作動画で作曲、3Dができます。
    サウンド:Hayuraku