通过 iframe 嵌入的 YouTube 视频忽略 z-index？

Posted 2023-02-24

【中文标题】通过 iframe 嵌入的 YouTube 视频忽略 z-index？

【英文标题】：YouTube Video Embedded via iframe Ignoring z-index?

【发布时间】：2012-02-22 20:47:49

【问题描述】：

我正在尝试实现一个水平多级下拉导航菜单。在（垂直）菜单下方，我通过 iframe 嵌入了一个 YouTube 视频。如果我将鼠标悬停在 Firefox 中的主要级别导航项目之一上，下拉菜单会正确显示在视频的顶部。

然而，在 Chrome 和 IE9 中，我在菜单和 iframe 之间的小空间区域中只能看到一小部分下拉菜单。它的其余部分似乎在 iframe 之后。

问题似乎与 YouTube 视频有关，不是 iframe。为了进行测试，我将 iframe 对准了另一个网站而不是视频，并且下拉菜单运行良好，即使在 IE 中也是如此。

问题 1：WTF？ 问题 2：为什么，即使我明确输入了 z-index:-999 !important; 在 iframe 上还会出现这个问题吗？

YouTube 嵌入代码中是否有一些内部 CSS 以某种方式覆盖了某些内容？

【问题讨论】：

你能发个链接吗？没有代码很难给出有用的回复。

z-index and iFrames!的可能重复

YouTube video content covering CSS drop down menus in IE < 9的可能重复

对于任何想知道它在 2015 年如何工作的人，<embed wmode="transparent" ...> 部分是您所需要的（至少在 Firefox 中），无需担心在 url 的 param 中设置 wmode s 或iframes

请记住，由于某种原因，有两种不同类型的 youtube 链接：youtube.com/v/video_id 和 youtube.com/embed/video_id。 v-link 忽略了 IE 中的 z-index，但嵌入工作正常。

【参考方案1】：

试试加wmode，好像有两个参数。

&wmode=Opaque

&wmode=transparent

除了take at look at this query，我找不到它起作用的技术原因，或者更多解释。

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

或者这个

//Fix z-index youtube video embedding
$(document).ready(function ()
    $('iframe').each(function()
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    );
);

【讨论】：

（我是 OP）谢谢大家！我在manisheriar.com/blog/flash_objects_and_z_index 偶然发现了一个类似的解决方案，关键似乎是在 和 wmode="transparent" 上同时使用 的 name="wmode" value="transparent" .正如我所怀疑的，这不是 iframe 问题。除非您强制它透明，否则 Flash 想要（要求？）最高 z-index 似乎是一个问题。

如果您使用 iframe JS API，playerVar wmode 也可以使用，尽管没有记录。

我已经集成了这个，我的 fancybox 仍然无法在 ie7/8 中工作，我仍然可以看到视频。 encompasscu.com.au/homeiswheretheheartis我能做什么

?wmode=transparent 选项对我来说就像一个魅力。我只希望我能更快地找到要问的正确问题。在我开始寻找 24 小时后，我找到了这个答案。也感谢您回答并发布上述问题！

@Dan，查看我的编辑...您的 youtube 嵌入代码中可能已经有一个查询字符串。 （如 ?rel=0 不显示相关视频）。如果是这种情况，请使用 &wmode=transparent（或 opaque - 我听说 opaque 使用较少的系统资源，所以我主要使用它，除非我有理由让它透明）。

【参考方案2】：

Joshc 的答案是正确的，但我发现它完全删除了 ?rel=0 查询字符串并将其替换为 ?wmode=transparent 项目 - 这具有显示 YouTube 的效果播放结束时的推荐视频列表，即使您最初不希望发生这种情况。

我更改了代码，以便首先扫描嵌入视频的src 属性，以查看其中是否已经存在问号?（因为这表示存在预先存在的查询字符串， 可能类似于?rel=0，但理论上可能是 YouTube 选择在未来添加的任何内容）。如果那里已经有查询字符串，我们希望保留它，而不是销毁它，因为它代表粘贴到此 YouTube 视频的人选择的设置，他们可能选择它是有原因的！

因此，如果找到?，则wmode=transparent 将使用以下格式附加：&mode=transparent，仅将其标记在预先存在的查询字符串的末尾。

如果没有找到?，那么代码的工作方式将与最初完全相同（在toomanyairmiles 的帖子中），只附加?wmode=transparent 作为新的查询字符串到网址。

现在，无论 YouTube URL 的末尾是否已经作为查询字符串存在，它都会被保留，并且所需的 wmode 参数会被注入或添加，而不会损坏之前的内容。

这是放入您的 document.ready 函数的代码：

$('iframe').each(function() 
  var url = $(this).attr("src");
  if (url.indexOf("?") > 0) 
    $(this).attr(
      "src" : url + "&wmode=transparent",
      "wmode" : "opaque"
    );
  
  else 
    $(this).attr(
      "src" : url + "?wmode=transparent",
      "wmode" : "opaque"
    );
  
);

【讨论】：

这对我有用，而接受的答案却没有（即使在修复代码之后）。感谢您的临时修复。

?开始参数查询字符串，&是分隔符。基本的东西。见***.com/questions/2667551/…

这在放弃前 10 秒解决了我的问题！

完美！我一直在寻找这个！

是opaque 不是Opaque（注意大小写）

【参考方案3】：

只需将这两个之一添加到 src url：

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe"   src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

【参考方案4】：

我在仅在 Internet Explorer 中嵌入 YouTube iframe 时遇到了同样的问题。

Z-index 被完全忽略，或者 Flash 视频只是出现在可能的最高索引处。

这是我使用的，稍微修改了上面的 jquery 脚本。

我的嵌入代码，直接来自 YouTube...

<iframe   src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

稍微改编自上述答案的 jQuery...

$('iframe').each( function() 
    var url = $(this).attr("src")
    $(this).attr(
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    )
);

基本上，如果您没有在嵌入设置中选择在视频播放完毕时显示建议的视频，您的"src" 网址末尾会有一个?rel=0。所以我添加了替换位以防?rel=0 存在。否则?wmode=transparent 将不起作用。

【参考方案5】：

我们可以简单地将?wmode=transparent 添加到 YouTube 网址的末尾。这将告诉 YouTube 包含设置了 wmode 的视频。因此，您的新嵌入代码将如下所示：-

<iframe   src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

【讨论】：

这已经在许多答案中提出，无需再用另一个答案重复。如果您有新内容要添加，请执行，否则请不要重复其他人已经发布的内容。

【参考方案6】：

只有这个对我有用：

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) 
        src = frames[i].src;
        if (src.indexOf('embed') != -1) 
        if (src.indexOf('?') != -1) 
            frames[i].src += "&wmode=transparent";
         else 
            frames[i].src += "?wmode=transparent";
        
    

</script>

我将它加载到footer.php Wordpress 文件中。在评论 here 中找到代码（感谢 Gerson）

【参考方案7】：

wmode=opaque 或 transparent 在我的查询字符串的开头没有解决任何问题。对我来说，这个问题只发生在 Chrome 上，甚至不会发生在所有计算机上。只有一个cpu。它也出现在 vimeo 嵌入中，可能还有其他。

我的解决方案是附加到我正在使用的引导模式的“显示”和“隐藏”事件，添加一个将 iframe 设置为 1x1 像素的类，并在模式关闭时删除该类。似乎它有效并且易于实现。

【参考方案8】：

答案对我来说并没有真正起作用，我在包装器上有一个点击事件，即 7,8,9,10 忽略了 z-index，所以我的解决方法是给包装器一个背景颜色，这一切突然起作用了。虽然它被认为是透明的，所以我用背景颜色白色定义了包装器，然后不透明度为 0.01，现在它可以工作了。上面的功能我也有，可以组合一下。

我不知道它为什么起作用，我只是很高兴它起作用了。

【参考方案9】：

BigJacko 的 Javascript 代码对我有用，但就我而言，我首先必须添加一些 JQuery“无冲突”代码。这是在我的网站上运行的修订版：

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j)
  $j('iframe').each(function() 
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) 
        $j(this).attr(
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        );
      
      else 
        $j(this).attr(
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        );
      
   );
);
</script>

【参考方案10】：

您在 iframe 上只需要：

...wmode="opaque"></iframe>

在网址中：

http://www.youtube.com/embed/123?wmode=transparent