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.

Without a link, or the complete markup, anything we say is just a wild guess. — Rob, Nov 30 '10 at 12:08
which Firefox version are you checking on? I checked its working fine in IE but I can not see the preview image in FF and Chrome. — Zain Shaikh, Dec 06 '10 at 22:23
In my case, I had a problem with IE and FF and it was working in Chrome. In FF and IE, flash was incorrectly overlapping dynamic popup objects. It was fixed by `` inside the ` — Tomas, Aug 19 '14 at 12:27
Smickie, You should probably formulate your question better, it is not clear what was overlapping what in your case. — Tomas, Aug 19 '14 at 12:28

score 28 · Accepted Answer · edited May 04 '11 at 20:38

28

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!

edited May 04 '11 at 20:38

Peter Mortensen

28,342
21
95
123

answered Dec 08 '10 at 07:36

Zain Shaikh

5,833
6
35
64

4

Setting wmode="opaque" will also work. Also, if you are using – Zeta Two Apr 11 '11 at 15:14
1

This solution does not work in Chrome 19.0.1084.52 m, Safari 5.1.7, but works in IE9. – Paul Jun 22 '12 at 20:10
does anyone know if there is a bug filed for this that I could track? – Brandon Cook Jun 11 '13 at 04:49
Inside the ` – Tomas Aug 19 '14 at 12:30

score 4 · Answer 2 · edited May 23 '17 at 11:45

There are a couple of options here as I see them:

Option 1

Use the wmode tag and you need to set this as the object is rendered. Adding it later will not work
(ref1) (ref2)

Using opaque should allow you to target the object with CSS z-index styles. Be aware that you should set this value in the <embed> tag as well as as a param
(ref3) (ref4)

Option 2

Hide the object until a user has clicked on your preview button. I spent ages tracking down the javascript that you used before I noticed that Sotiris had said the same thing. I believe this is your code here:

$('#play_video_box').click(function(){

if(app.isiPhone() == "iphone" || app.isiPhone() == "ipad"){
return true;
}

$(this).fadeOut('fast');
$('#page_video_preview_image').fadeOut('fast');
var player = document.getElementById('player');
player.sendEvent('PLAY');
return false;
});

I would amend one line to:

$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});

And use CSS to set visibility to hidden by default. Depending on your no javascript support requirements you may need to modify that.

The third link provided here is a rather good article on wmodes and how they work - I recommend checking that out if you decide to go with option 1 and run into trouble.

Hope that helps!

Your first point is worth reemphasizing: adding wmode after the object is rendered will not work. You have to catch it beforehand. So no amount of messing with it in Firebug and kin will get you anywhere. — ksenzee, Feb 23 '12 at 01:26

score 2 · Answer 3 · answered Jan 25 '11 at 20:02

I too was having a problem with the z-index of embedded Flash objects when using Google Chrome 8. Everything worked perfectly in IE 7. lnrbob hit the nail on the head with his option 1 solution. I had set wmode to opaque in the <embed> tag; but I neglected to add wmode as a <param> tag. Once I added <param name="wmode" value="opaque"/> between the <object> tag and the <embed> tag, the z-index started to work perfectly in Chrome without breaking IE.

score 0 · Answer 4 · answered Aug 30 '12 at 03:49

the following code works in ie,firefox,opera, but not worked on chrome(version 21)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="250">
<param name="movie" value="http://img.emarbox.com/dsp/img/300x250.swf">
<param name="quality" value="high"></param>
<param name="wmode" value="opaque"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://img.emarbox.com/dsp/img/300x250.swf" wmode="opaque" allowfullscreen="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="250"></embed>
</object>

<div style="cursor: pointer; margin-top:-250px; width:300px; height:250px; z-index:1; visibility: visible;">
<a href="http://www.emarbox.com" target="_blank" >
<img border="0" src="http://img.emarbox.com/dsp/img/flash_blank.gif" width="300" height="250" border="0" /></a>
</div>

score 0 · Answer 5 · edited May 04 '11 at 20:41

It doesn't work in Firefox 3.6 and Opera 10, also in Windows.

Possible solution: Just add in your CSS visibility:hidden; for the selector #both_video_and_preview_image #video_wrapper.

Then add jQuery code (I see that you use the library), so when the user click the preview image then the visibility change for the above selector to visible.

$("#page_video_preview_image").click(function() {
    $("#both_video_and_preview_image #video_wrapper").css("visibility","visible");
})

score -1 · Answer 6 · answered Nov 30 '10 at 21:04

-1

Have you tried using SWFObject and loading it like that?

answered Nov 30 '10 at 21:04

adamzwakk

689
2
9
23

Google Chrome, Flash and z-index wrong behaviour

6 Answers6

Linked