Google Chrome, Flash and z-index wrong behvaiour

2020-05-24 05:34发布

站内问答 / 后端开发
612 5 6

I have to show a div over the iframe which contains a flash video . The z-index of the div is set as 9999. but the ifarame is not having any z-index. But the div lies bellow the flash for Google Chrome, it works fine in IE 7/8/9 and Mozila Firefox.

The code i am using is

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>

Please give some work around for this problem.

Thanks in advance,

Prashant

Note : Please don't tell the solution as keeping "wmode=transparent" as a get parameter in the iframe src . as its not a generalized solution for this issue .

5条回答
【Aperson】
3楼-- · 2020-05-24 06:27

this may help:

<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>

by: http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/

查看更多
0人赞 添加讨论(0) 举报
Bombasti
4楼-- · 2020-05-24 06:28

I can add wmode, if and only if the flash content is on my web page, notice the IFRAME content is from third party(YouTube, in this case). How can I handle such scenario?

查看更多
0人赞 添加讨论(0) 举报
趁早两清
5楼-- · 2020-05-24 06:32

The problem is probably with the wmode of your flash player. Try "wmode=opaque", which means it should play nice with your z-ordering http://www.8bitrocket.com/2011/02/11/quick-guide-to-wmode-and-flash-embedding/

查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
6楼-- · 2020-05-24 06:34

You can add a wmode parameter by query string.

Ex: src="http://www.youtube.com/embed/LSaoRSlqQzw?wmode=opaque"

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)