YouTube播放器的FF3 / Windows CSS z-index问题
我被困在似乎与YouTube播放器的CSS / z-index冲突。 在Windows XP下的Firefox 3中，查看此页面： http : //spokenword.org/program/21396单击“收集”button并注意，popup式窗口<div>出现在 YouTube播放器下。 在其他浏览器上，<div>出现在顶部。 它的z-index值是999999.我试着将包含播放器的<object>元素的z-index设置为一个较低的值，但是这样做不起作用。 任何想法如何让popup窗口出现在播放器上？
尝试添加wmode参数是opaque如下所示：
（请注意，它包含在<embed>标签的<param>标签和 wmode属性中。）
<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>
虽然CMS的build议是有效的，但有一个重要的更新。 如果您想使用“iframe”而不是“embedded”，只需将?wmode=transparent添加到您的video链接中即可。 我觉得这更简单和干净。
更新 ，2014年2月
已经有一段时间了，这可能已经过时了。
有人报告说，现在&wmode=transparent作品，而不是。
我发现了一个纯JSfunction，它修复了所有的浏览器！
你去那里：
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); } } }
现在你可以运行在用jQuery加载页面的时候了：
$(document).ready(function () { fix_flash(); });
我们使用jQuery Flash插件将YouTube链接转换为Flash电影。 在这种情况下，wmode作为一个选项被传递，以便让YouTubevideo显示在我们打开的jQuery对话框的下面：
$('a[href^="http://www.youtube.com"]').flash( { width: nnn, height: nnn, wmode: 'opaque' } );
我注意到，wmode =“opaque”会严重影响CPU的使用。 Chrome使我的笔记本电脑使用50％的CPU（不透明〜8％）。
所以要小心这个选项。
