동작

이런 느낌입니다.
텍스트 상자에 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를 취득하는 방법은, 이 사이트를 참고로 했습니다.
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 3452546 / HO W-E-I-T-T-E-Tsube-U에서 어이 de f-ro-m-rl? 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

따라서 양식에서 입력하기에는 조금 사용하기 어렵습니다 ...

기타 예

라디오 버튼에서 로드

<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>

일반 URL 형식은 `htps //w w. 요츠베. 이 m/와 tch? v = ゔ ぃ에서 _ D ↩