覆盖youtube iframe覆盖不透明div

如何通过YouTubeembedded式video覆盖半透明透明度的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正在接近我们,越来越多的设备使用它来代替闪存,这使得youtubevideo的embedded变得复杂,幸运的是,youtube提供了一个特殊的embedded式iFrame,可处理所有的videoembedded兼容性问题,但现在以前用半透明的div覆盖video对象的方法已经不再有效了,我现在无法向对象添加一个<param name="wmode" value="transparent"> ,因为它现在是一个iFrame,那么如何在iframeembedded式video之上添加不透明的div?

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

问题是当你embedded一个YouTube的链接:

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

在一个iFrame中,默认的wmode是一个窗口,它本质上给了它一个大于其他所有东西的z-index,它将覆盖任何东西。

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

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> 

请注意,wmode = transparent修补程序只有在第一个时才有效

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

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

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

在Chrome中呈现很好。 你需要跨浏览器吗? 这真的有助于具体。

编辑 :Youtube呈现object ,并没有明确的wmode设置,意味着它默认为“窗口”这意味着它覆盖了一切 。 您需要:

a)自己托pipe包含对象/embedded代码的页面,并将wmode =“transparent”param元素添加到要embedded的对象和属性中,如果您select同时投放这两个元素

b)find一个方法让YouTube来指定这些。

我花了一天搞乱CSS,然后find了解决scheme提示。 将wmode=transparent添加为YouTubeurl的参数:

 <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> 

这允许iframeinheritance其容器的z-index,以便不透明的<div>将位于iframe之前。

美学目的是不透明的覆盖?

如果是这样,你可以使用:

 #overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; background: #000; pointer-events: none; opacity: 0.8; color: #fff; } 

'pointer-events:none'将改变覆盖行为,使其可能在物理上是不透明的。 当然,这只会在好的浏览器中工作。