Html 在youtube iframe上覆盖不透明div

如何在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>

编辑（添加更多说明）： HTML5正在接近我们，越来越多的设备使用它而不是flash，这使youtube视频的嵌入变得复杂，幸运的是youtube提供了一个特殊的可嵌入iFrame，处理所有视频嵌入兼容性问题，但是现在以前用半透明div覆盖视频对象的工作方法不再有效，我现在无法向对象添加

，因为它现在是一个iFrame，那么如何在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>

在铬精细渲染。你需要它跨浏览器吗？这确实有助于具体化

编辑：Youtube呈现

对象

和

嵌入

，没有明确的wmode设置，这意味着它默认为“窗口”，这意味着它覆盖了所有内容。您需要：

a） 如果您选择为这两个元素提供服务，请自己主持包含对象/嵌入代码的页面，并将wmode=“transparent”param元素添加到要嵌入的对象和属性中

b） 找到一种让youtube指定这些内容的方法

---

不透明覆盖层是否美观

如果是，您可以使用：

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

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

问题在于嵌入youtube链接时：

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

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

尝试将此GET参数附加到URL：

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>

---

在找到anataliocs tip之前，我花了一天时间摆弄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>

---

这允许iframe继承其容器的z索引，因此不透明的

将位于iframe的前面

请注意，wmode=transparent修复程序只有在第一次使用时才起作用

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

不是

---

是的，我发现了问题所在，在firefox和chrome中，它可以在正常背景下工作，增加不透明度可以让它发光。。。你的也很出色。编辑了iframe示例，使其看起来与我的一样。所以你想将不透明度应用于iframe内部的对象/嵌入元素？是的，我没有注意到iframe被覆盖，因为对我来说，对象覆盖了整个iframe，如果可能的话，我需要覆盖视频，否则，我将用一个相同宽度/高度和位置的黑色div替换它。@meder感谢链接和解决方案！我会马上试用，但flash仍然可以点击：）safari 4，chrome和firefox3.6仍在点击？？我正试图将youtube嵌入的视频置于不透明背景下，以达到完全美观的目的：）看起来youtube完全解决了这个问题。我仍然可以在chrome中看到问题。@scribu可能是flash安全问题，或者我遗漏了什么，我在本地服务器上进行了测试。可能。无论如何，anataliocs的解决方案对我很有效。你能给这个问题添加youtube标签吗？来自Adobe的关于这个问题的信息：。记录在案。

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