I'm currently on parental leave till September. During that time, I will not read any e-mail or blog comments.

Until I'm back, please read through my archives, take a look at my code/applications and check out my pictures.

Have a great summer, and a splendid winter to you aussies and kiwis!

How to put an HTML element on top of a Flash movie

Published on Monday, January 29th, 2007

Ever been in the situation where you want to put some HTML on top of Flash movie? You’ve cursed the designers for using Flash, and stated that it is impossible? If that’s the case, I’ll advise you to reconsider.

The solution to the problem is actually very easy. All you need to do is add a param to the object including the Flash:


	<param name="wmode" value="transparent">

This has been tested to work in the following web browsers:

Internet Explorer 5.0+
Firefox 1.5+ (I’m convinced it will work from 1.0+, but haven’t tested).
Safari 1.3+
Opera 7.03+

So, stop worrying about Flash being shown on top of your content, and instead, go out there and have a good time!

Posted in Developing, HTML/XHTML | 30 comments

30 comments

Sebastian Redl
January 29th, 2007 at 15:50

Be aware, though, that this can lead to a severe slowdown of animations. In one animation-heavy movie I’ve seen, the frame rate quadrupled after removing the transparent wmode.
Jason Law
January 29th, 2007 at 16:33

There is an issue though with placing a div on top of flash content using this method and having active links work. Where the background of the div drops out and only shows the link.
peder
January 29th, 2007 at 16:51

be aware of problems with charsets in the flash movie. using wmode at all makes the flash movie lock to us/en charset, for some characters. characters like @ needs to be written the american way (SHIFT+2) instead of the european way (ALTGR+2), etc. needless to say, it took me ages before i pinned this down.
Jonathan Snook
January 29th, 2007 at 17:13

There are also problems with positioning and handling of hit areas within Firefox that seem to be related to the use of transparent.
Ryan
January 30th, 2007 at 2:26

I’ve been looking for something like this. Thanks.
qureyoon
January 30th, 2007 at 5:58

for this kinda problem i recommended Veerle’s article here

along with all the examples and some explanation too
Robert Nyman - author
January 30th, 2007 at 8:41

Sebastian,

Thanks for the tip. I’ve heard it from other people too, after writing this post. It would be good to have some proper tests and statistics, though, to see what does and what does not work well.

Jason,

Interesting. Do you have any examples (I tested a div with a background color and links in it, and it seemed to work fine)?

peder,

Hmm. Very interesting, and weird. Why would it do that?

Jonathan,

Thanks for the info and the link.

Ryan,

I hope it works out well for you!

qureyoon,

Great, thanks for the link!
peder
January 30th, 2007 at 11:36

absolutely no idea. the company i work or had issues with this on many sites and the only workaround we found was to remove the wmode attribute. this just got to be a bug.
Robert Nyman - author
January 30th, 2007 at 12:03

peder,

Freaky. Let’s hope it was a bug in a certain Flash player version.
adam alexander
January 30th, 2007 at 22:09

Having looked at this specific problem just yesterday and hoping that it had been finally solved cross-browser, Safari (2.0, assuming earlier versions as well) has problems with rollover events over the flash rendering space, making dropdown menus disappear but remain funtional.

Can’t show the specific project i was working on, but you can see the flakiness here:
e.g. http://telerik.com/
Nick Cowie
January 31st, 2007 at 4:39

The big problem is cross platform, it works fine on a windows box, but on a Mac or *nix box, there is a problem with how it renders on the screen.

Roughly half the time the flash movie will appear above the HTML and the other time half below it. No matter what you do with z-indexes, source order etc.
Robert Nyman - author
January 31st, 2007 at 9:12

adam, Nick,

Thanks for your comments. It seems like it isn’t a rock solid case then, unfortunately…
Bruno Torres
January 31st, 2007 at 23:46

If the flash movie isn’t actually transparent, you can use wmode opaque wich is a little less CPU consuming, methinks.
Robert Nyman - author
February 1st, 2007 at 8:22

Bruno,

Interesting. I’ve seen opaque mentioned as well, but I didn’t know if it was less performance intense. Thanks for the tip!
Rob
February 5th, 2007 at 15:38

Works great for me on IE7, but no joy on Firefox 2.0.
Grant
February 8th, 2007 at 4:29

Beware that with name=”wmode” value=”transparent” there are problems with accessibility. Screen readers do not recognise the Flash content.
Chris Korhonen
February 19th, 2007 at 4:03

Watch out when setting the wmode property if you have a large Flash movie, where the vertical height extends beyond the browser viewport. This is where I have encountered situations where the hit area is offset by x pixels.

Also beware in this situation if your movie is supposed to do anything on the mousewheel event, you will often have the side effect of also scrolling the containing page as the browser isn’t sure what element has focus.

Another, weird, problem encountered in this scenario, and only in Firefox, is that the flashing cursor when a form field is selected within the Flash movie seems to vanish….
Robert Nyman - author
February 20th, 2007 at 8:50

Grant,

Interesting. Do you have any examples of that?

Chris,

Good to know! Thanks for sharing!
Roberto
March 12th, 2007 at 14:55

Hi,

I have been playing around in creating a quick demo.

In here we have:

1: A normal HTML web site with a HTML navigation - on top of the flash

2: The site is loading the content into a div without to refresh the page (some sort of AJAX)

3: The HTML navigation is loading the HTML content into the div and it is also controlling the flash at the same time (changes its flash bkg colour in this case).

4: If javascript is off the HTML site will work as normal but with no flash and no AJAX thingy

5: the web site should be totally accessible or at least to whatever degree HTML can be accessible. but it is not more a flash problem.

6: About bookmarking and back buttons i have found this link that may help us: Back & Bookmarking

At the moment this seems all to work fine; i have some issue in safari but I believe this can be solved as adobe.com seems to have not problem with their drop down menu on top of the flash in safari.

Possibly we have some whatever other issue but i believe they can be solved.

I would love to hear what you all think.

Demo

Thanks
Robert Nyman - author
March 13th, 2007 at 9:00

Roberto,

Great, thanks for sharing!
Roberto
March 13th, 2007 at 9:55

Hello again,

I want to conclude my research by sharing the tech notes from adobe related to this topic.

Situation:

As i was not in a position to fix the flash/safari bug when trying to achieve HTML on top, i have decided to focus my research on Safari.

But it did not take me much before i have found adobe’s notes:

Adobe

It is a shame really, but i guess we all have to wait and that’s it.

Thanks
Roberto
March 13th, 2007 at 9:56

Sorry link not working:

adobe’s notes
Filter 23/3 2007 - Felt
March 23rd, 2007 at 8:08

[…] Robert Nyman: How to put an HTML element on top of a Flash movie […]
vnart
May 16th, 2007 at 17:29

I found it work just fine with the transparent mode. Take a look at this example: Example 1
Robert Nyman - author
May 16th, 2007 at 20:19

vnart,

Great to hear!
roberto
May 18th, 2007 at 10:35

The site flkrs as in any previous example; i still don’t see a solution.
awahid
June 4th, 2007 at 9:58

Do we have solution for firefox ?
I tried examples/Demos but they are not working with firefox
heavenlyjohnson
June 22nd, 2007 at 13:52

I’ve been mucking around with this for hours and having big headaches. I finally found the bug. If I declare the div containing the flash object position:absolute the flash always goes on top of the HTML and ignores my z-index.

I switched from using an absolutely positioned layout to a float layout and bingo, everything suddenly works.
Lee
February 15th, 2008 at 10:31

Another note, if you set wmode to opaque or transparent, Flash movies and games won’t be able to respond to the mouse wheel in Firefox (whether anything is on top of them or not).

https://bugs.adobe.com/jira/browse/SDK-12415

I wanted to use wmode=opaque to display a HUD with instructions for Flash games, but not with that bug.
goga
April 15th, 2008 at 16:50

thanks alot man, I struggled with this for a while.

All the proceeds from ad clicks will go to charity. However, if you like to give something directly to charity yourself, I recommend choosing from the listed ones below.