Javascript 后期添加播放器时未触发Youtube iframe API事件

我有一个应用程序，当用户请求特定视频时，我会在某个时间点插入youtube iframe播放器（完整的iframe html片段）。这可能发生在加载应用程序后30秒或任何时间点，只是加载应用程序后不久

这似乎是youtube API的一个问题。在下面的代码示例中，您可以看到该示例不起作用，因为我在1秒后添加了iframe播放器。当您将超时时间从1000降低到1ms时，代码工作正常

因为那个测试，我发现YT事件没有触发，因为我的播放器在应用程序加载一段时间后被注入

当玩家没有立即添加到dom时，是否有方法触发事件？或者有人能解释为什么只有当玩家被立即添加到页面时（即使元素本身被添加到脚本之后），事件才起作用吗

谢谢

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（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'existing-iframe-example'{
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerReady（事件）{
document.getElementById（'existing-iframe-example'）.style.borderColor='#FF6D00'；
}
函数changeBorderColor（playerStatus）{
颜色变异；
如果（playerStatus==-1）{
color=“#37474F”//未开始=灰色
}else if（playerStatus==0）{
color=“#FFFF00”//结束=黄色
}else if（playerStatus==1）{
color=“#33691E”//播放=绿色
}else if（playerStatus==2）{
color=“#DD2C00”//暂停=红色
}否则如果（playerStatus==3）{
color=“#AA00FF”//缓冲=紫色
}否则如果（playerStatus==5）{
color=“#FF6DOO”//视频提示=橙色
}
如果（颜色）{
document.getElementById（'existing-iframe-example'）。style.borderColor=color；
}
}
函数onPlayerStateChange（事件）{
changeBorderColor（事件数据）；
}
函数go（）{
变量player=`；
document.querySelector（“#test”）.innerHTML=player；
document.querySelector（“#test”）.style.display=“block”；
}
setTimeout（函数（）{
go（）；
}, 1000)

对于处于相同情况的任何人，我已切换到使用，而不是注入完整的iframe，这似乎很好。

对于处于相同情况的任何人，我已切换到使用，而不是注入完整的iframe，这似乎很好

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