jQuery:将 wmode 设置为 Youtube 视频以进行 z-index 处理

Posted

技术标签:

【中文标题】jQuery:将 wmode 设置为 Youtube 视频以进行 z-index 处理【英文标题】:jQuery: setting wmode to Youtube video for z-index handling 【发布时间】:2011-12-18 22:39:29 【问题描述】:

我正在这样做:

//z-index of flash objects
$('object').prepend('<param name="wmode" value="opaque">');
$('object embed').attr('wmode', 'opaque');

所以,当我检查页面上的 youtube 视频时,它会显示:

<object  >
<param name="wmode" value="opaque">
<param name="movie" value="http://www.youtube.com/v/KUi32-suXjY?version=3&amp;feature=oembed">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/KUi32-suXjY?version=3&amp;feature=oembed" type="application/x-shockwave-flash"   allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></object>

我的页面上有带有fixed positionz-index:9999 的可拖动对象。但是,我没有改变让 youtube 视频留在这些对象后面。即使我设置了 wmode,youtube 视频也总是在最前面。

知道我在这里做错了什么吗?

【问题讨论】:

我相信 Flash 总是出现在其他 DOM 元素之上,即使你告诉它不要这样做。 不,它正在工作。我知道。我让它已经工作了一次。然而,那个时候使用直接的 html 代码而不是通过 javascript 注入的 html。也许这就是问题所在? 你用的是什么浏览器?因为在 Safari 和 Firefox 中,我可以看到可拖动元素背后的视频。 好的,谢谢,我正在使用 chrome。不能在 chrome 中工作,但似乎可以在所有其他浏览器中工作,所以搞砸了。谢谢! 【参考方案1】:

您是否尝试过 wmode 透明

这就是我用过的。不确定在这种情况下不透明和透明之间的区别是什么。 Using Window Mode (wmode) values

也不确定,但也许这会有所帮助: difference between opaque and transparent

【讨论】:

谢谢,但不能解决问题……无论透明还是不透明似乎都可以。不明白为什么。我在上面发布了我的问题的链接......也许你可以找出为什么 youtube 视频不想留在黑条后面。【参考方案2】:
<param name="wmode" value="transparent">

或者您可以使用新的 youtube 方法嵌入视频它会是这样的:

<iframe class="youtube-player" type="text/html"   src="http://www.youtube.com/embed/HgLviEa0YHo?wmode=transparent" frameborder="0"> </iframe>

还有 wmode 属性。

【讨论】:

谢谢,但这对我不起作用,因为 Wordpress 仍在使用旧的嵌入代码。看看我上面的链接,也许你可以看到我在这里做错了什么或者我错过了什么。 我可以看到可拖动元素后面的播放器 -> twitpic.com/7ae46g

以上是关于jQuery:将 wmode 设置为 Youtube 视频以进行 z-index 处理的主要内容,如果未能解决你的问题,请参考以下文章

将任意 Flash 对象 wmode 更改为透明

WMODE 和 Flash 视频 - 稳定性和性能

flash wmode参数详解

Facebook Safari OSX Youtube wmode 错误

Firefox 3.5.3 Windows + Flash + swfobject wmode问题

如何使用 Youtube 的 HTML5 iframe API 设置 wmode=opaque?