Internet Explorer和Firefox上的YouTube IFrame API [英] YouTube IFrame API on Internet Explorer and Firefox

问题描述

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

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

经过一些试验和错误，我终于明白这是不工作的，因为 div ID I传递给对象的CSS可见性设置为'none'。一旦它被设置为'visible'，整个事情就起作用了。之后，我尝试设置 div CSS为'display：none'（该应用程序需要隐藏视频这也导致iFrame API默默地失败（从不回调'onPlayerReady'）。

所以，简而言之，当使用YouTube iFrame API初始化 div 时，您希望保持隐藏状态，直到后来才使用像绝对定位这样的CSS技术来推送它关闭屏幕，直到您稍后想要。另外，发现一旦玩家对象被初始化，并且已经调用了'onPlayerReady'，你可以整天打开和关闭显示，一切仍然按预期工作。

HTML： / p>

 < button onclick =toggleYoutube（）;>显示/隐藏< / button> ; 
< div id =youtube>< / div> 
  

JS（使用jQuery）：

  var visible = false; 
函数toggleYoutube（）{
 visible =！visible; 
 if（visible）{
 $（＃youtube）。append（'< iframe id =videowidth =640height =360src =http：// www .youtube-nocookie.com / embed / cjvIeNt93nc？rel = 0frameborder =0allowfullscreen>< / iframe>'）; 
} else {
 $（＃video）。remove（）; 
 
 
 
 
 $ b 
请参阅 http://jsfiddle.net/wFVhT/2/  
 
More of an "answer" than a "question", but not having found this elsewhere I'm posting it here.

I was having difficulty initializing the iFrame API in all versions of IE and Firefox, with a somewhat custom implementation. Basically, it would load the API, but wouldn't create the player object. 

After a bit of trial and error, I finally figured out it wasn't working because the div ID I was passing to the object had its CSS visibility set to 'none'. Once it was set to 'visible' the whole thing worked.  After that I tried setting the div CSS to 'display:none' (the app required the video to be hidden until requested by the user) which also caused the iFrame API to fail silently (never calling back 'onPlayerReady').

So, long story short, when using the YouTube iFrame API to initialize on a div that you want to remain hidden until later, use a CSS technique like absolute positioning to push it off screen until you want it later.  Also, found that once the player object is initialized and 'onPlayerReady' has been called you could turn display on and off all day long and everything would still work as expected.
解决方案
Yotam is right, look at the following:

HTML:
<button onclick="toggleYoutube();">show / hide</button>
<div id="youtube"></div>
JS ( using 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();
    }
}
See full code at http://jsfiddle.net/wFVhT/2/

                        
这篇关于Internet Explorer和Firefox上的YouTube IFrame API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！