在onYouTubeIframeAPIReady内修改DOM时，不触发YouTube iframe API事件

问题描述

由于某种原因，在onYouTubeIframeAPIReady中将DIV添加到播放器父级（或其任何祖先）会导致播放器事件未触发。

检查控制台中未显示任何错误。发生在所有浏览器上。

使用YouTube的基本示例和onYouTubeIframeAPIReady调用的addDivTo（）函数，这是一个小玩意儿： https://jsfiddle.net/hdavu6o9/

这是一个已知的错误吗？是否有解决方法？

HTML：

<body id='body'>
    <div id='gparent'>
        <div id='parent'>
            <div id="player"></div>
            <div id="sibling"></div>
        </div>
   </div>
</body>

JS：

 function onYouTubeIframeAPIReady() {
    console.log("onYouTubeIframeAPIReady called");
    player = new YT.Player('player',{
      height: '390',width: '640',videoId: 'M7lc1UVf-VE',events: {
        'onReady': onPlayerReady,'onStateChange': onPlayerStateChange
      }
    });
    
    addDivTo('parent'); // player events not triggered
    //addDivTo('gparent'); // player events not triggered
    //addDivTo('body'); //player events not triggered
    //addDivTo('sibling'); //works fine
  }

  function addDivTo(id){
      var ele = document.getElementById(id);
      ele.innerHTML += "<div class='thediv'>DIV added to " + id + "</div>";
      console.log("DIV added to " + id);
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

youtube-iframe-api

在onYouTubeIframeAPIReady内修改DOM时，不触发YouTube iframe API事件

问题描述

解决方法

相关问答