我必须在包含flash视频的iframe上显示div。 div的z-index设置为9999.但ifarame没有任何z-index。但是谷歌Chrome的闪光灯仍然存在,它在IE 7/8/9和Mozila Firefox中运行良好。
我正在使用的代码是
flash.html
<!doctype html>
<html>
<head>
<title> Flash - zIndex</title>
</head>
<body>
<div style="position : absolute;left:200px;top:200px;width:320px; height:220px;background-color:#fff;z-index:999;" >
<iframe src="blank.html" style="width:100%; height:100%;">
</iframe>
</div>
<div id="textDiv" style="position : absolute; z-index:9999; left:200px;top:200px;border: 5px solid rgb(235, 127, 0);width:300px; height:200px;background-color:#fff;overflow:auto;">
this is the text div
</div>
<div id="flashDiv" style="height: 150px;">
</div>
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/3RD_3wooRjI" frameborder="0" allowfullscreen></iframe>
</body>
</html>
blank.html
<!doctype html>
<html>
<head></head>
<body></body>
</html>
请解决这个问题。
提前致谢,
PRASHANT
注意:请不要告诉解决方案将“wmode = transparent”作为iframe src中的get参数。因为它不是这个问题的通用解决方案。
答案 0 :(得分:20)
您可以按查询字符串添加wmode参数。
例如:src="http://www.youtube.com/embed/LSaoRSlqQzw?wmode=opaque"
答案 1 :(得分:6)
问题可能出在你的flash播放器的wmode上。尝试“wmode = opaque”,这意味着它应该与你的z排序很好 http://www.8bitrocket.com/2011/02/11/quick-guide-to-wmode-and-flash-embedding/
答案 2 :(得分:3)
答案 3 :(得分:1)
我可以添加wmode,当且仅当Flash内容在我的网页上时,请注意IFRAME内容来自第三方(在本例中为YouTube)。我该如何处理这种情况?
答案 4 :(得分:1)
这可能有所帮助:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("iframe").each(function(){
var ifr_source = $(this).attr('src');
var wmode = "wmode=transparent";
if(ifr_source.indexOf('?') != -1) $(this).attr('src',ifr_source+'&'+wmode);
else $(this).attr('src',ifr_source+'?'+wmode);
});
});
</script>
由: http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/