在youtube iframe上覆盖不透明的div
如何在youtube iframe嵌入视频上覆盖半透明不透明的div？
<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;
}youtube edit(补充了更多的澄清)：youtube HTML5正在接近我们，随着越来越多的设备使用它而不是flash，这使得嵌入视频变得复杂，谢天谢地youtube提供了一个特殊的可嵌入的iframe与处理所有视频嵌入兼容性问题，但现在以前的工作方法，覆盖一个视频对象与一个半透明的div不再有效，我现在无法添加一个<param name="wmode" value="transparent">到该对象，因为它现在是一个iFrame，那么我如何添加一个不透明的div在iFrame嵌入的视频之上呢？
回答 4
Stack Overflow用户
发布于 2011-01-25 06:38:10
Information from the Official Adobe site about this issue
问题是当你嵌入一个youtube链接时：
https://www.youtube.com/embed/kRvL6K8SEgY在iFrame中，默认的wmode是窗口化的，这实际上给了它一个比其他所有东西都大的z索引，它将覆盖任何东西。
尝试将此GET参数附加到您的URL：
wmode=opaque
如下所示：
https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque确保它是URL的第一个参数。其他参数必须在之后
在iframe标签中：
示例：
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>Stack Overflow用户
发布于 2011-03-02 06:11:15
请注意，wmode=transparent修复只有在第一次这样做时才有效
http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0不
http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparentStack Overflow用户
发布于 2011-02-07 06:50:38
我花了一天的时间研究CSS，然后我发现了anataliocs的提示。将wmode=transparent作为参数添加到YouTube URL：
<iframe title=<your frame title goes here>
src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"
scrolling="no"
frameborder="0"
width="640"
height="390"
style="border:none;">
</iframe>这允许iframe继承其容器的z索引，因此不透明的<div>将位于iframe的前面。
https://stackoverflow.com/questions/3820325
复制相似问题