为什么我的下拉菜单出现在 Chrome 和 IE9 中嵌入的 YouTube 视频后面？

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

在尝试创建水平多级下拉导航菜单时，用户遇到了在 Chrome 和 IE9 中，下拉菜单无法出现在嵌入的 YouTube 视频顶部（而在 Firefox 中却可以）。该问题与 YouTube 视频本身有关，而不是所使用的 iframe 技术。

问题 1：为什么会出现差异？

即使明确设置了 z-index：-999！重要；对于 iframe，下拉菜单仍然隐藏在视频后面。这表明 YouTube 嵌入代码中存在 CSS 干扰。

问题 2：使用 wmode 解决问题

要纠正这种情况，将 wmode 添加到 YouTube 嵌入代码似乎可以解决该问题。具体来说，可以使用以下参数：

• &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"></iframe>

或者，可以部署以下 jQuery 代码来修复页面上所有 iframe 的 z-index 问题：

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

通过使用 wmode 参数，可以定制 YouTube 嵌入代码以使其按预期运行，从而允许下拉菜单出现在所有主要浏览器中嵌入视频的顶部。

以上是为什么我的下拉菜单出现在 Chrome 和 IE9 中嵌入的 YouTube 视频后面？的详细内容。更多信息请关注PHP中文网其他相关文章！