Javascript 嵌入式Youtubu不'；隐藏时，不要在mobile safari上加载

谷歌最近改变了一些东西，所以我对将Youtube作为iFrame嵌入移动safari有一个奇怪的问题。当iFrame在页面加载过程中被隐藏（某些父div设置了display:none）并且随后被更改为可见时，Youtube播放器将不播放

---

有解决办法吗？我试着重新加载iframe，当它变成可见状态时，它就工作了。但这不是一个舒适的解决方案…

我假设您使用第三方youtube Iframe API将youtube播放器加载到一个div中。来自youtube的代码实际上有一个竞争条件，如果在调用onyotubeiFrameAPReady之前浏览器没有加载/解析div，视频加载将失败。在firefox中，它只会挂起一秒钟，Chrome足够聪明来处理这个问题

解决方案是确保此代码。在解析包含视频的容器后运行

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

这个代码

function onYouTubeIframeAPIReady() {

具有全局作用域，并在创建脚本后调用

我通常解决此问题的方法是使用标记创建者和事件侦听器创建函数“类”，并在我的document.ready函数中创建对象。然后在document.ready函数的正下方

function onYouTubeIframeAPIReady() {
    myVideo.apiReady();
}

其中“myVideo”是我创建的类，apiReady（）；包含

this.apiReady = function () {
    player = new YT.Player('player', {
        height: '548',
        width: '900',
        videoId: 'VIDEO234324',
        events: {
            'onReady': onPlayerReady
        }
    });
}

我希望这有帮助