YouTube 播放器的 FF3/Windows CSS z-index 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/326196/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
FF3/Windows CSS z-index problem with YouTube player
提问by Doug Kaye
I'm stuck on what appears to be a CSS/z-index conflict with the YouTube player. In Firefox 3 under Windows XP, Take a look at this page: http://spokenword.org/program/21396Click on the Collect button and note that the pop-up <div> appears underthe YouTube player. On other browsers the <div> appears on top. It has a z-index value of 999999. I've tried setting the z-index of the <object> element containing the player to a lower value, but that didn't work. Any idea how to get the pop-up to appear over the player?
我被困在与 YouTube 播放器似乎存在 CSS/z-index 冲突的问题上。在 Windows XP 下的 Firefox 3 中，请查看此页面：http://spokenword.org/program/21396单击收集按钮并注意弹出 <div> 出现在YouTube 播放器下方。在其他浏览器上， <div> 出现在顶部。它的 z-index 值为 999999。我尝试将包含播放器的 <object> 元素的 z-index 设置为较低的值，但这没有用。知道如何让弹出窗口出现在播放器上吗？
回答by CMS
Try to add the wmodeparameter to be opaquelike this:
尝试添加wmode参数是opaque这样的：
(Note that it's included in botha <param>tag anda wmodeattribute on the <embed>tag.)
（请注意，它也包含在这两个一个<param>标签和一个wmode在属性<embed>标签。）
<object width='425' height='344'>
<param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'>
<param name='type' value='application/x-shockwave-flash'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name="wmode" value="opaque" />
<embed width='425' height='344'
src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
type='application/x-shockwave-flash'
allowfullscreen='true'
allowscriptaccess='always'
wmode="opaque"
></embed>
</object>
回答by ?l?
although the recommendation by CMS is valid, there is an important update. If you want to use 'iframe' instead of 'embed' , simply add ?wmode=transparentto your video link and that does the magic. I find this more simple and clean.
虽然 CMS 的建议是有效的，但有一个重要的更新。如果您想使用 'iframe' 而不是 'embed' ，只需添加?wmode=transparent到您的视频链接即可。我觉得这更简单和干净。
Update, Feb 2014
2014 年 2 月更新
It's been a while and this may be outdated.
这已经有一段时间了，这可能已经过时了。
Somebody reported that now &wmode=transparentworks instead.
有人报告说，现在&wmode=transparent可以代替了。
回答by danfromisrael
i've found a pure JS function that fix it in all browsers!
我找到了一个纯 JS 函数，可以在所有浏览器中修复它！
there you go:
你去吧：
function fix_flash() {
// loop through every embed tag on the site
var embeds = document.getElementsByTagName('embed');
for (i = 0; i < embeds.length; i++) {
embed = embeds[i];
var new_embed;
// everything but Firefox & Konqueror
if (embed.outerHTML) {
var html = embed.outerHTML;
// replace an existing wmode parameter
if (html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i))
new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i, "wmode='transparent'");
// add a new wmode parameter
else
new_embed = html.replace(/<embed\s/i, "<embed wmode='transparent' ");
// replace the old embed object with the fixed version
embed.insertAdjacentHTML('beforeBegin', new_embed);
embed.parentNode.removeChild(embed);
} else {
// cloneNode is buggy in some versions of Safari & Opera, but works fine in FF
new_embed = embed.cloneNode(true);
if (!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase() == 'window')
new_embed.setAttribute('wmode', 'transparent');
embed.parentNode.replaceChild(new_embed, embed);
}
}
// loop through every object tag on the site
var objects = document.getElementsByTagName('object');
for (i = 0; i < objects.length; i++) {
object = objects[i];
var new_object;
// object is an IE specific tag so we can use outerHTML here
if (object.outerHTML) {
var html = object.outerHTML;
// replace an existing wmode parameter
if (html.match(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")[a-zA-Z]+('|")\s*\/?\>/i))
new_object = html.replace(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")window('|")\s*\/?\>/i, "<param name='wmode' value='transparent' />");
// add a new wmode parameter
else
new_object = html.replace(/<\/object\>/i, "<param name='wmode' value='transparent' />\n</object>");
// loop through each of the param tags
var children = object.childNodes;
for (j = 0; j < children.length; j++) {
try {
if (children[j] != null) {
var theName = children[j].getAttribute('name');
if (theName != null && theName.match(/flashvars/i)) {
new_object = new_object.replace(/<param\s+name\s*=\s*('|")flashvars('|")\s+value\s*=\s*('|")[^'"]*('|")\s*\/?\>/i, "<param name='flashvars' value='" + children[j].getAttribute('value') + "' />");
}
}
}
catch (err) {
}
}
// replace the old embed object with the fixed versiony
object.insertAdjacentHTML('beforeBegin', new_object);
object.parentNode.removeChild(object);
}
}
}
now you can just run in when the page loads with jQuery:
现在您可以在使用 jQuery 加载页面时运行：
$(document).ready(function () {
fix_flash();
});
回答by Matthew Kuehn
We use jQuery Flash pluginto convert YouTube links to Flash movies. In this case, wmode is passed as an option in order to get the YouTube video to appear underneath the jQuery Dialog we open:
我们使用jQuery Flash 插件将 YouTube 链接转换为 Flash 电影。在这种情况下， wmode 作为选项传递，以便让 YouTube 视频出现在我们打开的 jQuery 对话框下方：
$('a[href^="http://www.youtube.com"]').flash(
{ width: nnn, height: nnn, wmode: 'opaque' }
);
回答by Wojciech Kulik
I've noticed that wmode="opaque" terribly affects on usage of CPU.
Chrome make on my notebook 50% CPU usage (without opaque ~8%).
So be careful with this option.
我注意到 wmode="opaque" 严重影响 CPU 的使用。Chrome 在我的笔记本上占用 50% 的 CPU 使用率（没有不透明的 ~8%）。
所以要小心这个选项。
