Google Chrome, Flash and z-index wrong behvaiour

Question

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

Answer 1

You can add a wmode parameter by query string.

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

Answer 2

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?

Answer 3

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/

Answer 4

http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/

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