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

问题描述

如何将具有半透明不透明度的 div 覆盖在 youtube iframe 嵌入视频上?

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 正在接近我们，越来越多的设备使用它而不是 flash，这使 youtube 视频的嵌入变得复杂，幸运的是 youtube 提供了一个特殊的可嵌入 iFrame，可以处理所有视频嵌入兼容性问题，但现在是以前的覆盖方法具有半透明 div 的视频对象不再有效，我现在无法向对象添加 <param name="wmode" value="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 是窗口化的，这本质上给它一个比其他所有东西都大的 z-index，它会覆盖任何东西.

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 参数附加到您的 URL:

Try appending this GET parameter to your URL:

wmode=不透明

像这样:

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