on和火狐上的YouTube IFrame应用编程接口

Question

与其说是一个“问题”，不如说是一个“答案”，但我没有在其他地方找到它，所以我把它贴在了这里。

我在IE和iFrame的所有版本中都很难初始化Firefox，因为它们有一些自定义的实现。基本上，它会加载API，但不会创建播放器对象。

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

因此，长话短说，当使用YouTube iFrame应用程序接口初始化您想要隐藏的div时，请使用绝对定位等技术将其推出屏幕，直到您稍后需要它。此外，我还发现，一旦player对象初始化并调用了'onPlayerReady'，您就可以全天打开和关闭显示，一切仍将按预期工作。

Answer 1

你应该让玩家conainer为空。

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

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

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

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