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

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

但是，在Chrome和IE9中，在菜单和iframe之间的一小段空间中，只有一小部分下拉菜单可见。其余的似乎都在 iframe的后面。

问题似乎与YouTube视频有关，而不与iframe有关。为了进行测试，我将iframe定位于另一个网站而不是视频，并且即使在IE中，下拉菜单也可以正常工作。

• 问题1：WTF？
• 问题2：为什么，即使我明确地将z-index:-999 !important; iframe 放在iframe上，仍然会出现此问题？

YouTube嵌入代码中是否包含一些内部CSS，以某种方式覆盖了一切？

尝试添加wmode，它似乎有两个参数。

&wmode=Opaque

&wmode=transparent

我找不到它起作用的技术原因，也找不到更多解释，但请看一下此查询。

<iframe title="YouTube video player" width="480" height="390" 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");
    });
});

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

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

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

如果未?找到，则该代码将以与原始代码完全相同的方式工作（在toomanyairmiles的帖子中），?wmode=transparent并将新查询字符串追加到URL。

现在，无论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"
    });
  }
});

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

&wmode=Opaque

&wmode=transparent

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

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

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

这就是我使用的方法，略微修改了上面的jquery脚本。

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

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

从上面的答案改编的jQuery littley ...

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

基本上，如果您未选择在嵌入设置中完成视频播放后显示建议的视频，则网址?rel=0末尾会有一个"src"。所以我添加了替换位，以防万一?rel=0。否则?wmode=transparent将无法正常工作。

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

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

仅此一项对我有用：

<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文件中。在此处的注释中找到代码 （感谢Gerson）

wmode = opaque或透明在我的查询字符串的开头没有解决任何问题。对我来说，此问题仅在Chrome上出现，甚至在所有计算机上都没有。只有一个CPU。它也出现在vimeo嵌入中，也可能出现在其他嵌入物中。

我要附加到我正在使用的引导程序模态的“显示”和“隐藏”事件的解决方案，添加一个将iframe设置为1x1像素的类，并在模态关闭时删除该类。看起来它可行并且易于实现。

上面的答案对我没有真正的作用，我在包装器上单击事件，即7,8,9,10忽略了z-index，所以我的解决方法是为包装器提供背景色，这突然起作用了。虽然它是透明的，但我用白色的背景色定义了包装器，然后用0.01的不透明度定义了包装器，现在它可以工作了。我也有上面的功能，因此可以组合使用。

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

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

<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>

您在iframe上需要做的只是：

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

并在URL中：

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