在youtube iframe上覆盖不透明的div [英] overlay opaque div over youtube iframe

问题描述

如何在youtube iframe嵌入视频上重叠带有半透明透明度的div？

How can I overlay a div with semi-transparent opacity over a youtube iframe embedded video?

<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 =wmodevalue =transparent> 到对象，因为它现在是一个iFrame，那么如何在iframe嵌入视频的顶部添加一个不透明的div？

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?

推荐答案

Adob​​e官方网站关于此问题的信息

问题是当您嵌入youtube链接时：

The issue is when you embed a youtube link:

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

在iFrame中，默认wmode

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.

尝试将此GET参数追加到您的网址：

Try appending this GET parameter to your URL:

wmode = opaque

wmode=opaque

如此：

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

确保其在URL中的第一个参数。其他参数必须在之后

在iframe代码中：

In the iframe tag:

示例：

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

这篇关于在youtube iframe上覆盖不透明的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！