首页 > web前端 > css教程 > 为什么下拉菜单中的 YouTube iframe 在不同浏览器中呈现不同的效果?

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

Barbara Streisand
发布: 2024-11-05 05:38:02
原创
825 人浏览过

Why do YouTube iframes in dropdown menus render differently in different browsers?

嵌入在 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">
登录后复制

或者,也可以使用 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板