避免 zindex 的 Youtube 嵌入播放器

Posted 2023-05-09

【中文标题】避免 zindex 的 Youtube 嵌入播放器

【英文标题】：Youtube embed player avoiding zindex

【发布时间】：2012-09-18 20:23:16

【问题描述】：

我正在尝试将图像放置在 youtube 嵌入式播放器上。我通过 jQuery 将 wmode=transparent 添加到 url 以允许播放器接受 zindex。虽然它加载图像确实会显示在播放器上，但一旦页面完全加载，播放器就会返回图像顶部。这是什么原因造成的？

<iframe class="one"  id="bottom"   src="http://www.youtube.com

/embed/H7D4Ryi2ckg?list=SP0D260F7B6625A6BA&amp;hl=en_US" frameborder="0" 

allowfullscreen></iframe>

<img class="one" id="top"   

src="http://images.nationalgeographic.com

/wpf/media-live/photos/000/005/cache/domestic-cat_516_600x450.jpg"  >

<style type="text/css">

    .one position: absolute; top: 100px;

    #topz-index: 9999;

    #bottomz-index: 1;

</style>

<script type="text/javascript" >

$(document).ready(function ()

 $('iframe').each(function()

    var url = $(this).attr("src")

    $(this).attr("src",url+"?wmode=transparent")

 );

);

</script>

【问题讨论】：

奇怪，为什么 Youtube 嵌入需要 &wmode=transparent，而其他嵌入 (vimeo) 不需要这样做来在其上方制作 div/对话框？

【参考方案1】：

您的 iframe 源中没有 ?rel=0。如果您从替换字符串中删除rel=0，它将起作用。

您还缺少var url = ... 之后的分号终止符

编辑

修复语法错误后运行正常：meow

【讨论】：

我取出了那个部分，但它仍然不起作用。我更新了我的问题的代码。