Javascript 非动态插入youtube播放器iframe'；t火灾事件

我正在使用youtube的iframe api

我想手工编写

标记（而不是异步插入）。文件表明这是可能的

如果你写了标记，那么当你构造YT.Player对象时， 您不需要指定宽度和高度的值，它们是 指定为标记（…）的属性

但是当我直接插入

标记时

  <iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

（以及创建新玩家实例时选项中的宽度、高度和id）

我无法准备好调用函数onyoutubeiframeapi。我尝试过使用script标记的动态插入，效果很好。当您没有动态插入文档时，这些文档有点不清楚需要做什么，所以我非常感谢您的建议

---

谢谢

当您的iframe元素已经出现在页面上时，您仍然需要加载iframe javascript库，因为该库调用了

onyoutubeiframeapiredy

。因此，您的代码应该如下所示：

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

<script>
      var tag = document.createElement('script');
      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('player', {
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
</script>

var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}

---

请注意，在这种情况下，传递给

onyoutubeiframeapiredy

的值是iframe的ID，而不是div的ID。。。该库将识别出这是一个iframe，并将其挂接到现有视频中，而不是尝试为您动态生成一个iframe。

这很有意义。我确实试过了，但我会再试一次，让你知道。干杯

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

<script>
      var tag = document.createElement('script');
      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('player', {
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
</script>