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的父图层后面添加它们。
- 将背景附加到第一个图像,这是video的预览
- 将第二个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