JQuery,淡入youtube iframe嵌入

我试图淡入youtube iframe嵌入,但它只适用于IE9,所有其他最新的浏览器(Safari,Opera,Chrome,Firefiox)它没有。 iframe立即显示为将不透明度设置为0。

我在Windows上。

我错了什么?

ps:这适用于Vimeo youtube iframe嵌入。

的jsfiddle:

http://jsfiddle.net/jgtSS/26/

出于安全原因,当iframe /最近层的Alpha通道级别(不透明度/背景)减小时,内嵌框架将完全可见。 因此,即使不透明度设置为0.99999 ,框架也会显示。

我为此问题创建了一个解决方案:创建两个大小相同的图层,然后在iFrame的父图层后面添加它们。

  1. 将背景附加到第一个图像,这是video的预览
  2. 将第二个div的背景设置为页面的背景,例如white

然后,将第二个DIV设置为不透明度0 。 第一张图像的背景变得更加明显。 在动画结束时,使用回调函数隐藏第一个div:

要允许用户在动画期间激活video,请将单击事件处理程序绑定到DIV,DIV会立即隐藏图层,并调用内联video的playVideo方法。

要调用playVideo方法,您需要对嵌入video的引用。 由于您尚未使用YouTubevideoAPI创建video,因此无法使用全局变量来访问video。 前段时间,我创建了一个函数来调用嵌入video的方法。
阅读: YouTube iframe API:如何控制已经在HTML中的iframe播放器?

最后的代码

我在小提琴上创建了一个实例: http : //jsfiddle.net/jgtSS/34/ 。 完整代码也如下所示。

     

您应该将wmode = opaque添加到youtubeurl。 比它会顺利消退。 像htis一样

 

感谢Canolucas awnser在这里找到: https ://stackoverflow.com/a/14426131/1303927