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，因此如何在iframe上添加不透明div嵌入式视频？

Answer 1

Information from the Official Adobe site about this issue

问题在于您嵌入了YouTube链接：

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

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

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

WMODE =不透明
像这样：

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

确保它是网址中的第一个参数。其他参数必须在
之后
在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设置，这意味着它默认为“window”，这意味着它会覆盖所有内容。你需要：

a）自己托管包含object / embed代码的页面，如果选择同时提供两个元素，则将wmode =“transparent”param元素添加到object和属性中

b）为youtube找一种方法来指定它们。

Answer 4

在我发现解剖学问题之前，我花了一天时间搞乱CSS。将wmode=transparent作为参数添加到YouTube网址：

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

这允许iframe继承其容器的z-index，因此您的不透明<div>将位于iframe前面。

Answer 5

不透明覆盖层是否适用于美学目的？

如果是这样，您可以使用：

#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'将改变叠加行为，使其在物理上不透明。当然，这只适用于良好的浏览器。

在youtube iframe上叠加opaque div

5 个答案: