代码之家 › 专栏 › 技术社区 › Timo Huovinen

在youtube iframe上覆盖不透明div

overlay youtube iframe css html

109

Timo Huovinen · 技术社区 · 14 年前

如何将半透明不透明的div覆盖到youtube iframe嵌入的视频上?

<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正在向我们逼近,越来越多的设备使用它而不是flash,这使得youtube视频的嵌入变得复杂,幸好youtube提供了一个特殊的可嵌入iFrame,处理所有的视频嵌入兼容性问题,但现在以前用半透明div覆盖视频对象的工作方法是不再有效,我现在无法添加 <param name="wmode" value="transparent"> 对象,因为它现在是一个iFrame,所以如何在iFrame嵌入视频的顶部添加一个不透明div?

5 回复 | 直到 11 年前

210

anataliocs 13 年前

Information from the Official Adobe site about this issue

问题是当你嵌入youtube链接时:

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

在iFrame中,默认的wmode是窗口化的,这实际上给了它一个z索引,它比其他任何东西都大,它将覆盖任何东西。

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>

Mike 14 年前

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

不是

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

Waynn Lue 11 年前

~~隐马尔可夫模型。。。这次有什么不同? http://jsfiddle.net/fdsaP/2/~~

在铬精细渲染。你需要跨浏览器吗?具体点确实有帮助。

:Youtube呈现 object 和 embed 没有显式的wmode集,这意味着它默认为“window”,这意味着它覆盖了一切 . 您需要:

b) 想办法让youtube指定这些。

Tim Cooper 13 年前

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>

这允许iframe继承其容器的z索引,因此 <div>

Chris 14 年前

不透明覆盖层是否出于美观目的?

如果是,您可以使用:

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

“指针事件:无”将更改覆盖行为,使其在物理上不透明。当然,这只适用于好的浏览器。