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

YouTube 视频嵌入和 z-index 问题

使用多级下拉导航菜单下方的 iframe 嵌入 YouTube 视频时，您可能会遇到Chrome 和 Internet Explorer 中下拉菜单出现在视频后面的问题。将鼠标悬停在主导航项上时，下拉菜单应出现在所有浏览器中的视频顶部。

问题 1：为什么下拉菜单出现在 Chrome 和 IE9 中的 YouTube 视频后面？

此问题与 YouTube 视频本身有关，与 iframe 无关。 YouTube 嵌入包含覆盖其他 CSS 设置的内部 CSS，包括您的 z-index 值。

问题 2：为什么设置 z-index:-999 !重要； iframe 上的 仍然会导致问题？

YouTube 嵌入代码中的覆盖 CSS 优先于您应用于 iframe 的任何 z-index 设置。

解决方案：

要解决此问题，请将以下参数添加到嵌入视频的 URL：

&wmode=Opaque

此设置允许视频融入背景，从而允许页面上的其他元素

附加说明：

• 您还可以使用参数 wmode=transparent 代替 Opaque，尽管这可能会导致透明度
• 或者，您可以在加载页面上的所有 iframe 之前使用 jQuery 修改其 URL，如下面的代码片段所示：

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

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