cssflashgoogle-chromez-indexwmode

Google Chrome, Flash and z-index wrong behaviour


Google Chrome is displaying the z-index of a Flash video incorrectly.

Take a look at http://maxusglobal.com/ in Firefox or Internet Explorer.

Now take a look at it in Chrome.

The big video at the top of the page should have a "preview" image z-indexed over the top of it. It does in Firefox and Internet Explorer, but not Google Chrome.

This doesn't seem to be a WebKit thing, but specifically a Chrome bug.

I have tried all the wmodes, (opaque, window and transparent), but this doesn't fix it. I also changed the z-index of the Flash box, but it is still not working.


Solution

  • Add wmode="transparent" to your <embed> tag. Like the following.

    <embed wmode="transparent" 
           height="314" width="516"
           type="application/x-shockwave-flash" 
           id="player"
           name="page_player" 
           src="/swfs/player.swf" 
           allowscriptaccess="always"
           allowfullscreen="true" 
           flashvars="file=/attachments/files/u_t_o_N_1.mp4">
    

    And hide the div of the hello image if that is not necessary.

    I hope this helps!