Internet Explorer 和 Firefox 上的 YouTube IFrame API答案

【问题标题】：YouTube IFrame API on Internet Explorer and FirefoxInternet Explorer 和 Firefox 上的 YouTube IFrame API
【发布时间】：2012-12-18 07:59:21
【问题描述】：

更多的是“答案”而不是“问题”，但在其他地方没有找到，我将其发布在这里。

我在所有版本的 IE 和 Firefox 中初始化 iFrame API 时遇到了困难，其中有一些自定义实现。基本上，它会加载 API，但不会创建播放器对象。

经过一番反复试验，我终于发现它不起作用，因为我传递给对象的 div ID 的 CSS 可见性设置为 'none'。一旦它被设置为'visible'，整个事情就起作用了。之后，我尝试将div CSS 设置为'display:none'（该应用要求在用户请求之前隐藏视频），这也导致 iFrame API 静默失败（从不回调'onPlayerReady'）。

因此，长话短说，当您使用 YouTube iFrame API 对您希望在稍后保持隐藏状态的 div 进行初始化时，请使用绝对定位等 CSS 技术将其推离屏幕，直到您以后需要它为止。此外，发现一旦初始化了播放器对象并调用了'onPlayerReady'，您就可以整天打开和关闭显示，一切仍将按预期工作。

【问题讨论】：

这是一个很好的观点，而且还值得一提的是，如果你有一个可见的播放器，然后在播放器（或容器）上设置display: none，播放器就会被浏览器有效地清除。您以后将无法设置 display: inline 并重用相同的播放器实例。将播放器移出视口也是这里的答案。
请坚持格式。即使您知道所发布内容的答案，也请将其发布为以问题形式表达的问题，然后发布答案。（如果需要，问题网络表单允许您同时发布两者，因此没有理由将答案放入问题帖子中。）

标签： internet-explorer firefox youtube-api youtube-iframe-api

【解决方案1】：

您应该将播放器容器留空，例如

<div class="myPlayerContainer"></div>

当你想展示它时，只需将它附加到容器中：

$('#showVideoBtn').click(function(){
    $('.myPlayerContainer').show().append('~ code of youtube iframe ~');
});

【讨论】：

【解决方案2】：

Yotam 是对的，看下面：

HTML：

<button onclick="toggleYoutube();">show / hide</button>
<div id="youtube"></div>

JS（使用 jQuery）：

var visible = false;
function toggleYoutube() {
    visible = !visible;
    if ( visible ) {
        $("#youtube").append( '<iframe id="video" width="640" height="360" src="http://www.youtube-nocookie.com/embed/cjvIeNt93nc?rel=0" frameborder="0" allowfullscreen></iframe>' );
    } else {
        $("#video").remove();
    }
}

在http://jsfiddle.net/wFVhT/2/查看完整代码

【讨论】：