Question

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

但是，在Chrome和IE9中，在菜单和iframe之间的小空间区域中只能看到下拉条的一小部分。其余的似乎是在后面的iframe。

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

问题1：WTF？

问题2：为什么，即使我明确表示z-index:-999 !important; 在iframe上是否还会出现此问题？

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

Answer 1

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

&wmode=Opaque

&wmode=transparent

我无法找到其工作原因的技术原因，或更多解释，但take at look at this query。

<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");
    });
});

Answer 2

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

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

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

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

现在，无论YouTube网址末尾可能有什么内容都可以作为查询字符串，它都会被保留，所需的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"
    });
  }
});

Answer 3

只需将这两个中的一个添加到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>

Answer 4

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

Z-index完全被忽略，或者Flash视频只是出现在最高指数上。

这就是我使用的，稍微调整上面的jquery脚本。

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

<iframe width="560" height="315" 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"
    })
});

基本上，如果您在嵌入设置中未选择在视频播放结束时显示建议的视频，则?rel=0网址末尾会显示"src"。所以我在?rel=0存在的情况下添加了替换位。否则?wmode=transparent将无效。

Answer 5

我们只需将?wmode=transparent添加到YouTube网址的末尾即可。这将告诉YouTube将视频包含在wmode集中。所以你新的嵌入代码将如下所示： -

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

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

Answer 7

wmode =我的查询字符串开头的opaque或透明没有解决任何问题。对我来说这个问题只发生在Chrome上，而不是发生在所有计算机上。只有一个CPU。它也发生在vimeo嵌入，也可能是其他嵌入。

我的解决方案是附加到我正在使用的bootstrap模式的'shown'和'hidden'事件，添加一个将iframe设置为1x1像素的类，并在模态关闭时删除该类。似乎它有效并且易于实现。

Answer 8

答案abow并没有真正起作用，我在包装器上有一个click事件，即7,8,9,10忽略了z-index，所以我的修复是给包装器一个背景颜色而且它全部一个突然的工作。 Al虽然它被认为是透明的，所以我定义了背景颜色为白色的包装，然后是不透明度0.01，现在它可以工作。我也有上面的功能，所以它可以是一个组合。

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

Answer 9

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>

Answer 10

iframe所需要的只是：

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

并在网址中：

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

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

10 个答案: