【Youtube Player API】埋め込む動画を動的に変更する

動作

こんな感じです。
テキストボックスにurlを入力するたびに、埋め込まれたYoutubeの動画が変更されます。

コード

//　ここがiframeに置き換わる
<div id="ytplayer"></div>
<input type="text" id="url" style="width: 600px">

<script>
  // IFrame API Playerを読み込む
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // APIコードが読み込まれた後に、YouTube Playerを作成する
  let player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', { // playerはiframeに置き換えるdivタグのid
      height: '360', // プレイヤーの高さ
      width: '640', // プレイヤーの幅
    });
  }

コードの前半部分の、プレイヤーを作成するところまでは公式のサンプルページとほぼいっしょです。
異なる点は、プレイヤーオブジェクトを作成するときに、動画IDを指定せずに後からキュー関数で読み込んでいるところです。

  const url = document.getElementById('url');
  let videoId;
  // url入力フォームの入力されたイベントを監視
  url.addEventListener('input', () => {
    // urlのv=以降が動画id
    videoId = url.value.split('v=')[1];
    // 正しいurlの形式だったとき
    if (videoId) {
      // &=クエリパラーメターがついていることがあるので取り除く
      const ampersandPosition = videoId.indexOf('&');
      if(ampersandPosition != -1) {
          videoId = videoId.substring(0, ampersandPosition);
      }
    }
    // 指定さらた動画IDのサムネイルを読み込み、動画を再生する準備をする。
    player.cueVideoById({videoId: videoId});
});

</script>

URLから動画IDを取得する方法は、こちらのサイトを参考にさせていただきました。
https://stackoverflow.com/questions/3452546/how-do-i-get-the-youtube-video-id-from-a-url?rq=1

inputイベントはvalue要素が変更されるたびに発生するので、テキストが変更されるたびにURLから動画IDを取得します。

取得した動画IDをcueVideoById関数に渡すことで、プレイヤーに動画を読み込ませることができます。

また、loadVideoById関数は動画IDを渡すことで即座に動画を再生することができます。

ちなみにcueVideoByUrlやloadVideoByUrlなど動画IDの代わりにURLを渡すことができる関数もあるのですが、URLの形式がhttp://www.youtube.com/v/VIDEO_ID?version=3に完全に適合している必要があります。¹

そのため、フォームから入力させるには少々使いにくくなっていますね...

その他の例

ラジオボタンから読み込む

<div id="player"></div><br>
好きなVtuberは?
<input type="radio" name="video_id" value="Lv46-MIAS8o">ギバラ
<input type="radio" name="video_id" value="EtKEC-4dW18" >月ノ美兎
<input type="radio" name="video_id" value="5YOeKW0OfPE" >本間ひまわり

<script>
  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 player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '360',
      width: '640',
    });
  }

  const video_ids = document.getElementsByName('video_id');
  video_ids.forEach(function(video_id) {
    video_id.addEventListener('click', function() {
      const videoId = document.querySelector('input:checked[name=video_id]').value;
      if (videoId){
        player.loadVideoById({videoId: videoId});
      }
    })
});
</script>

1. 通常のURLの形式は`https://www.youtube.com/watch?v=VIDEO_ID
   ↩