blocks|key|3234124|text|不透明的覆盖是出于美学目的吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3234125|如果是这样，您可以使用：|3234126|#overlay+{
++++++++position:+fixed;
++++++++top:+0;
++++++++right:+0;
++++++++bottom:+0;
++++++++left:+0;
++++++++z-index:+50;
++++++++background:+#000;
++++++++pointer-events:+none;
++++++++opacity:+0.8;
++++++++color:+#fff;
}|code-block|syntax|javascript|3234127|‘’pointer+events:+none‘将改变覆盖行为，使其在物理上是不透明的。当然，这只适用于优秀的浏览器。|3234128|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Is the opaque overlay for aesthetic purposes?

If so, you can use:

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

'pointer-events: none' will change the overlay behavior so that it can be physically opaque. Of course, this will only work in good browsers.

blocks|key|298385|text|Information+from+the+Official+Adobe+site+about+this+issue|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|298386|问题是当你嵌入一个youtube链接时：|298387|https://www.youtube.com/embed/kRvL6K8SEgY|code-block|syntax|javascript|298388|在iFrame中，默认的wmode是窗口化的，这实际上给了它一个比其他所有东西都大的z索引，它将覆盖任何东西。|298389|尝试将此GET参数附加到您的URL：|298390|wmode=opaque|298391|如下所示：|298392|https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque|298393|确保它是URL的第一个参数。其他参数必须在之后|style|BOLD|298394|在iframe标签中：|298395|示例：|298396|<iframe+class="youtube-player"+type="text/html"+width="520"+height="330"+src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque"+frameborder="0"></iframe>|298397|entityMap|0|LINK|mutability|MUTABLE|url|http://helpx.adobe.com/x-productkb/multi/swf-file-ignores-stacking-order.html^0|0|1L|0|0|0|0|0|0|0|0|0|0|L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|D|3|E|5|6|7|1G|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1H|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1I|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1J|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1K|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|C|$]]|$1|S|3|T|5|H|7|1M|8|@]|9|@]|C|$I|J]]|$1|U|3|V|5|6|7|1N|8|@$A|1O|B|1P|W|X]]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|1R|8|@]|9|@]|C|$]]|$1|12|3|13|5|H|7|1S|8|@]|9|@]|C|$I|J]]|$1|14|3|-4|5|6|7|1T|8|@]|9|@]|C|$]]]|15|$16|$5|17|18|19|C|$1A|1B]]]]

<a href="http://helpx.adobe.com/x-productkb/multi/swf-file-ignores-stacking-order.html" rel="noreferrer">Information from the Official Adobe site about this issue</a>

The issue is when you embed a youtube link:

<pre><code>https://www.youtube.com/embed/kRvL6K8SEgY
</code></pre>

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.

Try appending this GET parameter to your URL:

wmode=opaque

like so:

<pre><code>https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque
</code></pre>

Make sure its the first parameter in the URL. Other parameters must go after

In the iframe tag:

Example:

<pre><code>&lt;iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"&gt;&lt;/iframe&gt;
</code></pre>

blocks|key|3019849|text|我花了一天的时间研究CSS，然后我发现了anataliocs的提示。将wmode=transparent作为参数添加到YouTube+URL：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3019850|<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>|code-block|syntax|javascript|3019851|这允许iframe继承其容器的z索引，因此不透明的<div>将位于iframe的前面。|3019852|entityMap^0|Z|H|0|0|P|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

I spent a day messing with CSS before I found anataliocs tip. Add <code>wmode=transparent</code> as a parameter to the YouTube URL:

<pre><code>&lt;iframe title=&lt;your frame title goes here&gt; 
 src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent" 
 scrolling="no" 
 frameborder="0" 
 width="640" 
 height="390" 
 style="border:none;"&gt;
&lt;/iframe&gt;
</code></pre>

This allows the iframe to inherit the z-index of its container so your opaque <code>&lt;div&gt;</code> would be in front of the iframe.

blocks|key|298419|text|请注意，wmode=transparent修复只有在第一次这样做时才有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|298420|http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0|code-block|syntax|javascript|298421|不|298422|http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent|298423|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Note that the wmode=transparent fix only works if it's first so

<pre><code>http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&amp;rel=0
</code></pre>

Not 

<pre><code>http://www.youtube.com/embed/K3j9taoTd0E?rel=0&amp;wmode=transparent
</code></pre>

How can I overlay a div with semi-transparent opacity over a youtube iframe embedded video?

<pre><code>&lt;iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"&gt;&lt;/iframe&gt;
&lt;div id="overlay"&gt;&lt;/div&gt;
</code></pre>

CSS

<pre><code>#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;
}
</code></pre>

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 <code>&lt;param name="wmode" value="transparent"&gt;</code> to the object, because it is now a iFrame, so how do I add a opaque div on top of the iframe embedded video?

overlay opaque div over youtube iframe

容器

HTML5

如何在youtube iframe嵌入视频上覆盖半透明不透明的div？<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frame...

问在youtube iframe上覆盖不透明的div
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在youtube iframe上覆盖不透明的divEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在youtube iframe上覆盖不透明的div
EN