在youtube iframe上叠加opaque div

Question

如何在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;
}

编辑(添加更多说明): HTML5正在逼近我们,越来越多的设备使用它而不是闪存,这使得youtube视频的嵌入变得复杂,幸好youtube提供了一个特殊的可嵌入iFrame,可以处理所有视频嵌入兼容性问题,但是现在以前使用半透明div覆盖视频对象的方法不再有效,我现在无法添加<param name="wmode" value="transparent">到对象,因为它现在是iFrame,所以如何在顶部添加不透明的div iframe嵌入式视频？

Answer 1

来自Adobe官方网站的有关此问题的信息

问题是当您嵌入YouTube链接时:

https://www.youtube.com/embed/kRvL6K8SEgY

在iFrame中,默认的wmode是窗口化的,它基本上为它提供了比其他所有内容更大的z-index,它将覆盖任何东西.

尝试将此GET参数附加到您的网址:

WMODE =不透明

像这样:

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>

Answer 2

请注意,wmode = transparent fix仅在第一次有效时才有效

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

不

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

Answer 3

嗯......这次有什么不同？http://jsfiddle.net/fdsaP/2/

在Chrome中渲染很好.你需要跨浏览器吗？它确实有助于具体化.

编辑:Youtube渲染object和embed没有明确的wmode设置,这意味着它默认为"窗口",这意味着它覆盖了所有内容.你需要:

a)自己托管包含object/embed代码的页面,如果选择同时为两个元素提供服务,则将wmode ="transparent"param元素添加到object和attribute to embed

b)为youtube找一种指定方法.