css - Google Chrome, Flash and z-index wrong behaviour

Question

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.

Answer 1

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!