События YouTube iframe API не запускаются при добавлении плеера на более поздней стадии

Question

У меня есть приложение, в которое я вставляю проигрыватель YouTube iframe (полный фрагмент HTML iframe) в какой-то момент времени, когда пользователь запрашивает конкретное видео. Это может произойти, например, 30 секунд после загрузки приложения или в любой момент времени, но не сразу после загрузки приложения.

Кажется, это проблема для API YouTube. В приведенном ниже примере кода вы можете видеть, что пример не работает, потому что я добавляю проигрыватель iframe через 1 секунду. Когда вы уменьшаете тайм-аут с 1000 до 1 мс, код работает нормально.

Из-за этого теста я обнаружил, что события YT не запускаются из-за того, что мой проигрыватель вводится на более позднем этапе, когда приложение уже загружено в течение некоторого времени.

Есть ли способ вызвать события, когда игрок не сразу добавлен в дом? Или кто-то может объяснить, почему события работают только тогда, когда проигрыватель сразу добавляется на страницу (даже если сам элемент добавляется после сценария)

Спасибо!

https://jsbin.com/vuhibelabi/1/edit?html,output

<script type="text/javascript">

  var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('existing-iframe-example', {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
    });
  }
  function onPlayerReady(event) {
    document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
  }
  function changeBorderColor(playerStatus) {
    var color;
    if (playerStatus == -1) {
      color = "#37474F"; // unstarted = gray
    } else if (playerStatus == 0) {
      color = "#FFFF00"; // ended = yellow
    } else if (playerStatus == 1) {
      color = "#33691E"; // playing = green
    } else if (playerStatus == 2) {
      color = "#DD2C00"; // paused = red
    } else if (playerStatus == 3) {
      color = "#AA00FF"; // buffering = purple
    } else if (playerStatus == 5) {
      color = "#FF6DOO"; // video cued = orange
    }
    if (color) {
      document.getElementById('existing-iframe-example').style.borderColor = color;
    }
  }
  function onPlayerStateChange(event) {
    changeBorderColor(event.data);
  }

  function go(){
    var player = `<iframe id="existing-iframe-example"
        width="640" height="360"
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
        frameborder="0"
        style="border: solid 4px #37474F"
></iframe>`;
  document.querySelector("#test").innerHTML = player;
  document.querySelector("#test").style.display = "block";
  }

  setTimeout(function(){
    go();
  }, 1000)

</script>

Answer 1

Для тех, кто находится в той же ситуации, я переключился на использование решения на основе *1001* JS вместо введения полного iframe, и это, кажется, работает нормально.