覆盖YouTube上的不透明div iframe

108

如何通过YouTube视频嵌入视频覆盖半透明不透明度的div？覆盖YouTube上的不透明div 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正在向我们逼近，与使用它而不要使用闪光灯越来越多的设备，其YouTube视频嵌入复杂，幸运的是，youtube提供了一个特殊的嵌入式iFrame，可处理所有视频嵌入兼容性问题，但现在，以前用半透明div覆盖视频对象的工作方法不再有效，我现在无法将<param name="wmode" value="transparent">添加到对象，因为它现在是一个iFrame，所以如何在iframe嵌入式视频之上添加一个不透明的div？

来源

2010-09-29 Timo Huovinen

它看起来像YouTube完全固定的问题。 – 2011-01-26 13:38:34

我仍然可以在Chrome中看到问题。 – scribu 2011-01-30 00:03:48

@预览它可能是闪存安全问题，或者我错过了一些东西，我在本地服务器上测试过。 – 2011-01-31 12:02:43

210

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

确保其在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>

来源

2011-01-24 22:38:10 anataliocs

这应该是wmode =不透明。 – ybakos 2011-06-23 19:54:33

来自Adobe的有关此问题的信息：[http://kb2.adobe.com/cps/155/tn_15523.html](http://kb2.adobe.com/cps/155/tn_15523.html）。只是为了记录。 – Wacek 2011-07-10 11:37:17

~~嗯......这次有什么不同？ http://jsfiddle.net/fdsaP/2/~~

~~在Chrome中呈现很好。你需要跨浏览器吗？它确实有助于具体。~~

编辑有：Youtube呈现object和embed没有明确的wmode集，这意味着它默认为“窗口”，这意味着它覆盖一切。您需要：

一）主机包含对象/嵌入代码自己的页面，添加的wmode =“透明” param元素为对象和属性，如果你选择成为两个元素嵌入

b）找到一种方式让youtube指定这些。

来源

2010-09-29 09:37:41

是的，我发现问题出在哪里，在firefox和chrome中，它与普通背景一起工作，增加了不透明度，使它通过闪耀......你的光芒也透过。 – 2010-09-29 09:50:33

编辑iframe示例以查看我的外观。 http://jsfiddle.net/fdsaP/6/ – 2010-09-29 09:59:03

所以......你希望不透明度适用于iframe中的object/embed元素？ – 2010-09-29 10:00:48

是为了美观而不透明的覆盖？

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

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

“指针的事件：无”将改变叠加的行为，以便它可以在物理上不透明。当然，这只会在好的浏览器中运行。

来源

2010-09-29 09:48:19 Chris

safari 4，Chrome和firefox3.6仍然通过点击？ – 2010-09-29 09:53:46

这不是你想要的笏吗？ – Codebeef 2010-09-29 09:55:45

我试图将嵌入的YouTube视频放在不透明背景背后，以达到完美的审美目的:) – 2010-09-29 09:57:08

我花了一天的CSS搞乱才找到anataliocs尖。添加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索引，以便您的不透明<div>会在iframe的前面。

来源

2011-02-06 22:50:37 user605723

需要注意的是，如果它是第一个将wmode =透明的修复只能这样

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

不

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

来源

2011-03-01 22:11:15 Mike

感谢您的提示 – 2011-03-07 08:57:38

这是最简单的解决方案...工作..谢谢你+1 – 2013-01-11 16:43:55

覆盖YouTube上的不透明div iframe

回答

相关问题