Question

我正在使用youtube的iframe api

https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

我想手工编写<iframe>标签（不要异步插入）。文档表明这是可能的

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

但是当我直接插入<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>

并删除动态代码生成

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

（以及创建新播放器实例时选项的宽度，高度和ID）

我无法调用YouYouTubeIframeAPIReady上的函数。我已经尝试使用脚本标记的动态插入，它的工作原理。当你不动态插入时，文档有点不清楚 - 所以我很感激你的建议

由于

Answer 1

当您的iframe元素已经存在于页面上时，您仍然必须加载iframe javascript库，因为它是调用onYouTubeIFrameAPIReady的库。所以你的代码应该是这样的：

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

请注意，在这种情况下，您传递给onYouTubeIFrameAPIReady的值是您的iframe的ID，而不是div的ID ...库会识别出这是一个iframe并挂钩到现有视频而不是试图为你动态生成iframe。

youtube播放器iframe的非动态插入不会触发事件

1 个答案: