use*_*493 129 css youtube iframe
我正在尝试实现水平多级下拉菜单.紧接着(垂直)菜单,我通过iframe嵌入了YouTube视频.如果我将鼠标悬停在Firefox中的某个主级别导航项上,则会在视频顶部显示正确的下拉菜单.
但是,在Chrome和IE9中,在菜单和iframe之间的小空间区域中只能看到下拉条的一小部分.其余部分似乎是iframe的背后.
问题似乎与YouTube视频有关,而不是 iframe.为了测试,我将iframe定位在另一个网站而不是视频,并且下拉菜单工作正常,即使在IE中也是如此.
z-index:-999 !important;
在iframe上放置了这个问题仍然会发生？是否有一些内嵌CSS,YouTube嵌入代码包含在某种程度上压倒一切？
too*_*les 243
尝试添加wmode,它似乎有两个参数.
&wmode=Opaque
&wmode=transparent
我找不到它工作原因的技术原因,或者更多的解释,但看看这个查询.
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
或这个
//Fix z-index youtube video embedding
$(document).ready(function (){
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
Big*_*cko 28
Joshc的答案是在正确的轨道上,但我发现它完全删除了?rel=0查询字符串并将其替换为?wmode=transparent项目 - 这样可以在播放结束时显示YouTube推荐视频列表,即使您最初没有我希望这发生.
我更改了代码,以便src首先扫描嵌入视频的属性,以查看其中是否已存在问号?(因为这表示存在预先存在的查询字符串,这可能是?rel=0理论上的但可能在理论上是YouTube选择在未来添加的任何内容).如果已经存在查询字符串,我们希望保留它,而不是销毁它,因为它代表了粘贴在此YouTube视频中的任何人选择的设置,并且他们可能是出于某种原因选择了它!
因此,如果?找到,wmode=transparent将使用以下格式附加:&mode=transparent仅在预先存在的查询字符串的末尾标记它.
如果没有?找到,那么代码将以与原来完全相同的方式工作(在toomanyairmiles的帖子中),仅?wmode=transparent作为新的查询字符串附加到URL.
现在,无论YouTube网址末尾可能有什么内容都可以作为查询字符串,它都会被保留,并且所需的wmode参数会被注入或添加而不会损坏以前的内容.
这是放入您的document.ready函数的代码:
$('iframe').each(function() {
var url = $(this).attr("src");
if (url.indexOf("?") > 0) {
$(this).attr({
"src" : url + "&wmode=transparent",
"wmode" : "opaque"
});
}
else {
$(this).attr({
"src" : url + "?wmode=transparent",
"wmode" : "opaque"
});
}
});
只需将这两个中的一个添加到src url:
&wmode=Opaque
&wmode=transparent
<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
我在YouTube上遇到了同样的问题iframe仅在Internet Explorer中嵌入.
Z-index完全被忽略,或者flash视频只是出现在最高指数上.
这就是我使用的,略微适应上面的jquery脚本.
我的嵌入代码,直接来自YouTube ...
<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>
jQuery略微改编自上面的答案......
$('iframe').each( function() {
var url = $(this).attr("src")
$(this).attr({
"src" : url.replace('?rel=0', '')+"?wmode=transparent",
"wmode" : "Opaque"
})
});
基本上,如果您在嵌入设置中完成视频后未选择显示建议的视频,则?rel=0您的"src"网址末尾会显示.所以我已经添加了替换位,以防万一?rel=0.否则?wmode=transparent将无法正常工作.