Question

我正在使用FancyBox插件来访问我网站的部分图片。在我的一个页面上，我还有来自YouTube的嵌入式iFrame代码，用于在页面上放置视频。

在同一页面上是一个缩略图，点击后，FancyBoxes图像。但是，嵌入的YouTube视频仍然覆盖了FancyBox图像。我做了一些z-index实验，但仍然没有运气。

即使使用z-index设置，iFrame是否具有页面中所有元素的资历？

Answer 1

将 wmode = transparent 添加为参数。

Html解决方案

<iframe title="YouTube video player" 
width="480" height="390" 
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" 
frameborder="0"
>

jQuery解决方案：

$(document).ready(function () {
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

来源http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

Answer 2

总之，是的。但Youtube视频是Flash。 Flash也拥有Z-order的资历。它将覆盖它是否在IFRAME中。

IFRAME和Flash是“重量级”对象。它们有自己的Window Manager对象（Windows中的HWND），因此它们位于其他重量级对象之前或之后。

div，span等是“轻量级”。也就是说，它们是绘制的对象，绘制在Body（这是一个重量级的对象）上，并由浏览器管理，而不是窗口管理器。

就操作系统窗口管理器而言，它们只是浏览器绘制的漂亮图片。这就是为什么他们不能覆盖“真实”对象（或者窗口管理器认为是真实的）。

它们必须是轻量级的，因为如果每个DIV和SPAN和A必须保留操作系统资源，它们会迅速耗尽窗口管理器。

Answer 3

如果您希望根据与任何其他HTML元素相同的z-index规则呈现Flash小程序，则需要为包含的Flash设置WMODE属性。

请参阅：

http://www.communitymx.com/content/article.cfm?cid=E5141
differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage

Answer 4

非常简单，只需将此参数添加到您的iframe网址即可：

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

祝你好运！

Answer 5

要让它在IE中运行（至少7和8），你必须添加：

<param name="wmode" value="transparent" />

我认为没有办法将此附加到iframe网址，因此您的内容需要具有此功能，可能在对象标记之间。

Answer 6

嗯，这里的问题是我无法控制flash元素。我基本上只是从仅包含标签的youtube网站中提取嵌入式iFrame HTML。所以我无法设置WMODE属性。

迟到的回答但是：是的，你可以。只是将？wmode = opaque粘贴到yt url上。

<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............

z-index和iFrames！

6 个答案: