在youtube iframe上覆盖不透明的div [英] overlay opaque div over youtube iframe
问题描述
如何在youtube iframe嵌入视频上重叠带有半透明透明度的div?
How can I overlay a div with semi-transparent opacity over a youtube iframe embedded video?
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>
CSS
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.8;
/*background:rgba(255,255,255,0.8); or just this*/
z-index:50;
color:#fff;
}
编辑(添加更多说明):
HTML5正在接近我们,越来越多的设备使用它而不是闪光,这使YouTube视频的嵌入复杂化,幸运的是,YouTube提供了一个特殊的可嵌入iFrame处理所有的视频嵌入兼容性问题,但现在以前工作方法用半透明div覆盖视频对象的方法不再有效,现在我无法添加< param name =wmodevalue =transparent>
到对象,因为它现在是一个iFrame,那么如何在iframe嵌入视频的顶部添加一个不透明的div?
edit (added more clarification):
HTML5 is approaching us, with more and more devices that use it instead of flash, which complicates the embedding of youtube videos, thankfully youtube provides a special embeddable iFrame with handles all of the video embedding compatibility issues, but now the previously working method of overlaying a video object with a semi-transparent div is no longer valid, I am now unable to add a <param name="wmode" value="transparent">
to the object, because it is now a iFrame, so how do I add a opaque div on top of the iframe embedded video?
推荐答案
问题是当您嵌入youtube链接时:
The issue is when you embed a youtube link:
https://www.youtube.com/embed/kRvL6K8SEgY
在iFrame中,默认wmode
in an iFrame, the default wmode is windowed which essentially gives it a z-index greater then everything else and it will overlay over anything.
尝试将此GET参数追加到您的网址:
Try appending this GET parameter to your URL:
wmode = opaque
wmode=opaque
如此:
https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque
确保其在URL中的第一个参数。其他参数必须在之后
在iframe代码中:
In the iframe tag:
示例:
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
这篇关于在youtube iframe上覆盖不透明的div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!