Html 在 youtube iframe 上覆盖不透明的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3820325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overlay opaque div over youtube iframe
提问by Timo Huovinen
How can I overlay a div with semi-transparent opacity over a youtube iframe embedded video?
如何在 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
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;
}
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?
编辑（添加更多说明）：HTML5 正在接近我们，越来越多的设备使用它而不是 Flash，这使 youtube 视频的嵌入变得复杂，幸运的是 youtube 提供了一个特殊的可嵌入 iFrame，可以处理所有视频嵌入兼容性问题，但是现在以前用半透明 div 覆盖视频对象的工作方法不再有效，我现在无法向<param name="wmode" value="transparent">对象添加 a ，因为它现在是 iFrame，那么如何在顶部添加不透明的 div iframe 嵌入视频？
回答by anataliocs
Information from the Official Adobe site about this issue
The issue is when you embed a youtube link:
问题是当您嵌入 youtube 链接时：
https://www.youtube.com/embed/kRvL6K8SEgY
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.
在 iFrame 中，默认 wmode 是窗口化的，这本质上给了它一个比其他所有东西都大的 z-index，它会覆盖任何东西。
Try appending this GET parameter to your URL:
尝试将此 GET 参数附加到您的 URL：
wmode=opaque
wmode=不透明
like so:
像这样：
https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque
Make sure its the first parameter in the URL. Other parameters must go after
确保它是 URL 中的第一个参数。其他参数必须在后面
In the iframe tag:
在 iframe 标签中：
Example:
例子：
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
回答by Mike
Note that the wmode=transparent fix only works if it's first so
请注意， wmode=transparent 修复仅在它首先如此时才有效
http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0
Not
不是
http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent
回答by meder omuraliev
Hmm... what's different this time? http://jsfiddle.net/fdsaP/2/
嗯……这次有什么不同？http://jsfiddle.net/fdsaP/2/
Renders in Chrome fine. Do you need it cross-browser? It really helps being specific.
在 Chrome 中渲染得很好。你需要它跨浏览器吗？它确实有助于具体。
EDIT: Youtube renders the objectand embedwith no explicit wmode set, meaning it defaults to "window" which means it overlays everything. You need to either:
编辑：Youtube 在没有明确设置 wmode 的情况下呈现object和embed，这意味着它默认为“窗口”，这意味着它覆盖了所有内容。您需要：
a) Host the page that contains the object/embed code yourself and add wmode="transparent" param element to object and attribute to embed if you choose to serve both elements
a) 自己托管包含对象/嵌入代码的页面，如果您选择同时提供这两个元素，则将 wmode="transparent" param 元素添加到对象和要嵌入的属性
b) Find a way for youtube to specify those.
b) 为 youtube 找到一种方法来指定这些。
回答by user605723
I spent a day messing with CSS before I found anataliocs tip. Add wmode=transparentas a parameter to the YouTube URL:
在我找到 anataliocs 技巧之前，我花了一天的时间来处理 CSS。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>
This allows the iframe to inherit the z-index of its container so your opaque <div>would be in front of the iframe.
这允许 iframe 继承其容器的 z-index，因此您的不透明<div>将位于 iframe 的前面。
回答by Chris
Is the opaque overlay for aesthetic purposes?
不透明的覆盖层是出于美学目的吗？
If so, you can use:
如果是这样，您可以使用：
#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' will change the overlay behavior so that it can be physically opaque. Of course, this will only work in good browsers.
'pointer-events: none' 将改变覆盖行为，使其在物理上是不透明的。当然，这只适用于好的浏览器。
