Google Chrome, Flash and z-index wrong behvaiour

13,000

Solution 1

You can add a wmode parameter by query string.

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

Solution 2

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/

Solution 3

http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/

Solution 4

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?

Solution 5

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/

View more solutions

13,000

Prashant Dubey

Updated on June 04, 2022

Comments

Prashant Dubey almost 2 years

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 .

Prashant Dubey about 13 years

Hi divillysausages, thanks for your suggestion , but i dont want to change the src as its provided by a third party(youtube in this case). Thanks Prashant
divillysausages about 13 years

can you change it through javascript and see what happens?
Horse almost 12 years

you shouldnt really add questions as answers tbh, but like this - <iframe ... wmode="opaque"></iframe>