How to get flash player to display under content on a PC?

Question

Long story short, I'm developing a theme template for a blog that enables you to view the posts in blocks. The main part of the post is displayed at first, then the secondary content is displayed over that when you hover over the post block.

Everything works fine on a Mac Versions of all major browsers, but start browsing on a PC, and all hell breaks loose when you start trying to display content over Flash Video embeds. The flash element remains visible over the content. It's completely unusable.

From a PC, you can view an example of the problem here: http://photorific.tumblr.com

I'm almost certain this is a bug in the Flash Plugin for Windows, but I was wondering if anyone else had come across this problem before, and if there were any solutions.

This problem has presented itself for a while now and any help would be really, really, really appreciated!

Answer 1

Try putting wmode="transparent" in the object tag for the flash content.

Answer 2

This is a known bug in Flash Player on windows. It essentially ignores any form of z-index, or assumes the flash object is at z-index: +INFINITY. Either way, there's two fixes. As stated previously, you can use the wmode=transparent param, but this will let other content bleed through the flash movie. The other option is to use an IFRAME shim between the Flash movie and whatever content you want to appear over the Flash movie.

MooTools has a plugin called IframeShim which can do this for you automatically. I'd be surprised if there wasn't an equivalent function available for jquery.

Answer 3

Thanks for the replies. @Marc, it's good to know I'm not going crazy.

I did find out that setting the window mode property, which Tumblr doesn't do natively when outputting video code, worked fine.... but it had to be opaque rather than transparent.

Working with a raw video string (<object><params /><embed /></object>), here's the solution I came up with that works perfectly for me:

/*  Add wmode = opaque
-------------------------------------------------------*/
if( ! player.match(/name="wmode"/))
    player = player.replace(/<param/, '<param name="wmode" value="opaque" /><param');

if( ! player.match(/wmode="(transparent|opaque)"/))
    player = player.replace(/\/><\/object>/, 'wmode="opaque" /></object>');

player = player.replace('wmode="transparent"', 'wmode="opaque"');
player = player.replace('name="wmode" value="transparent"', 'name="wmode" value="opaque"');

Now, flash video on windows sits nicely behind the desired divs.... as long as javascript is enabled.

Thanks again for all you're answers.