覆盖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'将改变覆盖行为，使其可能在物理上是不透明的。 当然，这只会在好的浏览器中工作。
