23

更多的是“答案”而不是“问题”，但在其他地方没有找到这个我把它贴在这里。

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

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

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

4

2 回答 2

1

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

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

当您想显示它时，只需将其附加到容器中：

$('#showVideoBtn').click(function(){
    $('.myPlayerContainer').show().append('~ code of youtube iframe ~');
});
于 2013-05-28T09:55:32.897 回答
1

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/上的完整代码

于 2013-05-28T16:33:51.477 回答