为什么下拉菜单中的 YouTube iframe 在不同浏览器中呈现不同的效果？

嵌入在 iframe 中的 YouTube 视频在某些浏览器中忽略 z-index

通过 iframe 嵌入在其下方的 YouTube 视频的多级下拉导航菜单在某些网络中造成了渲染问题浏览器。虽然下拉菜单出现在 Firefox 中的视频顶部，但在 Chrome 和 IE9 中只有一小部分可见。

令人惊讶的是，罪魁祸首不是 iframe，而是 YouTube 视频本身。将 iframe 定位到其他外部网站时，即使在 IE 中，下拉菜单也能正常显示。这表明 YouTube 的嵌入代码可能存在问题。

专家建议合并 wmode 参数，该参数有两个值：

• 不透明
• 透明

尽管解释其效果的文档有限，但将此参数附加到视频的 URL（如下例所示）可以解决问题：

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

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

此方法成功撤销了 YouTube 视频的 z-index 主导地位，允许下拉菜单和其他元素在其上方正确呈现。

以上是为什么下拉菜单中的 YouTube iframe 在不同浏览器中呈现不同的效果？的详细内容。更多信息请关注PHP中文网其他相关文章！