Question

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

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

经过一些试验和错误之后，我终于发现它无法正常工作，因为我传递给对象的div ID已将其CSS可见性设置为'none'。一旦设置为'visible'，整个过程就起作用了。之后，我尝试将div CSS设置为'display:none'（应用要求视频在用户请求之前隐藏），这也导致iFrame API无声地失败（从不回拨{{1} }）。

所以，长话短说，当使用YouTube iFrame API在'onPlayerReady'上初始化您要保持隐藏状态直到以后，使用像绝对定位这样的CSS技术将其推离屏幕直到您以后需要它。此外，发现一旦玩家对象被初始化并且div被调用，你可以整天打开和关闭显示，一切都将按预期工作。

Answer 1

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

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

的完整代码

Internet Explorer和Firefox上的YouTube IFrame API

2 个答案: