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

#動作
こんな感じです。
テキストボックスにurlを入力するたびに、埋め込まれたYoutubeの動画が変更されます。
![youtube.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496565/8236f429-28cf-d9d2-7109-d96fd7ced3cc.gif)

#コード

```html

//　ここが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', // プレイヤーの幅
    });
  }
```

コードの前半部分の、プレイヤーを作成するところまでは[公式のサンプルページ](https://developers.google.com/youtube/iframe_api_reference?hl=ja)とほぼいっしょです。
異なる点は、プレイヤーオブジェクトを作成するときに、動画IDを指定せずに後から**キュー関数**で読み込んでいるところです。

```javascript

  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`に**完全に適合している必要があります**。[^1]

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

#その他の例
ラジオボタンから読み込む
![radio.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496565/657d4f19-7289-bdc5-a4c2-f63fb0eeea35.gif)

```html
<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
