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

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,HTML5/HTML/XHTML |

52 Comments

  • 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 says:

    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 says:

    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.

  • There are also problems with positioning and handling of hit areas within Firefox that seem to be related to the use of transparent.

  • Ryan says:

    I've been looking for something like this. Thanks.

  • qureyoon says:

    for this kinda problem i recommended Veerle's article here ;)

    along with all the examples and some explanation too ;)

  • Robert Nyman says:

    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 <code>div</code> 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 says:

    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 says:

    peder,

    Freaky. Let's hope it was a bug in a certain Flash player version.

  • 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 says:

    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 says:

    adam, Nick,

    Thanks for your comments. It seems like it isn't a rock solid case then, unfortunately… :-(

  • Bruno Torres says:

    If the flash movie isn't actually transparent, you can use wmode opaque wich is a little less CPU consuming, methinks.

  • Robert Nyman says:

    Bruno,

    Interesting. I've seen <code>opaque</code> mentioned as well, but I didn't know if it was less performance intense. Thanks for the tip!

  • Rob says:

    Works great for me on IE7, but no joy on Firefox 2.0.

  • Grant says:

    Beware that with name="wmode" value="transparent" there are problems with accessibility. Screen readers do not recognise the Flash content.

  • 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 says:

    Grant,

    Interesting. Do you have any examples of that?

    Chris,

    Good to know! Thanks for sharing!

  • Roberto says:

    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 says:

    Roberto,

    Great, thanks for sharing!

  • Roberto says:

    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:

    <a>Adobe

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

    Thanks

  • Roberto says:

    Sorry link not working:

    adobe's notes

  • […] Robert Nyman: How to put an HTML element on top of a Flash movie […]

  • vnart says:

    I found it work just fine with the transparent mode. Take a look at this example: Example 1

  • Robert Nyman says:

    vnart,

    Great to hear!

  • roberto says:

    The site flkrs as in any previous example; i still don't see a solution.

  • awahid says:

    Do we have solution for firefox ?

    I tried examples/Demos but they are not working with firefox

  • 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 says:

    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 says:

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

  • Vasyu says:

    6UUtJh Vasyu testit vasyu.net

  • Abid says:

    thank you buddy, it solved my problem…..

  • Britta says:

    I tried putting this param in my flash object to no avail. Do you know of any other tricks which might fix this problem?

  • Danny Namnum says:

    This is the easyest solution to a browser issue i have ever found. Thanks a lot.

  • Web says:

    I can't get it work. Should I add anything else. The div should be absolute?

    Thanks a lot!

    Webby

  • Adas says:

    I love you man!!

    You saved my life, where do you live, i want to buy you some flowers.

  • Rafael Ravena says:

    Hey, guys.

    You should try to add the wmode parameter nested to the object tag (""), but also the wmode property to the embedded tag ("")

    Works perfectly on IE 8, Firefox 3, Opera 9, Safari 4, Chrome 2, when adding a div over the flash movie (i tryed with a youtube embedded movie and a ajax dynamic hover menu).

    Don't forget, thou, to set your css's z-index property.

    Shame on me i didn't tested it on other browser versions, but I guess I'm dealing with 90% of internet surfers in this case, anyway.

    Good luck to you all.

  • Rafael Ravena says:

    sorry. didn't quite read the explanation below about posting html code.

    the code removed follows bellow:

    <param name="wmode" value="transparent"> nested to the object tag

    <embed wmode="transparent" (…)></embed> on the embedded tag

  • Sonny says:

    Thank you Robert!
    I managed to get it done.
    regards,
    Son

  • Lewis says:

    Does anyone know how to put some text onto a picture in html?

  • alt says:

    I try but in shaerpoint is not work fine any solution for that!

  • alt says:

    Anyone know how to put some text onto a flash in MOSS Sharepoint 2007?

  • Altaf Pinjari says:

    I got solution " put some text onto a flash in MOSS Sharepoint 2007?"

    ans :

    Demo Demo Demo Demo Demo Demo Demo Demo Demo

    Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo Demo

    Demo Demo Demo Demo Demo Demo Demo Demo Demo

    Demo Demo Demo Demo Demo Demo Demo Demo Demo

    Demo Demo Demo Demo Demo Demo Demo Demo Demo

    Demo Demo Demo Demo Demo Demo Demo Demo Demo

  • Altaf Pinjari says:

    only use :

    wmode = "transparent";

  • zep says:

    but it's impossible ton make a click on it like that !

    here is a solution for that :)

  • Neil says:

    Just tried this on a youtube video, it didn’t work.

  • Sandy says:

    I was looking for a solution to another flash problem I was having (flash images not loading) when I found this page, so its a real bonus to have found this simple solution to flash overlay, which I have had complaints about before. Many thanks for sharing.

  • Oscar says:

    Thanks! Kepp up the good work

  • Piyush Soni says:

    As of now, my HTML elements are overlaying on YouTube Flash player quite fine, *without doing anything*. Not doing that for Chrome even after setting wmode=transparent or opaque.

  • Tom says:

    Must add a z-index style property to the flash object. I used
    this.style.zIndex = -1;
    this.addParam(‘wmode’, ‘transparent’);
    property lines and added a
    style=”z-index:1″
    onto my div I was positioning over the movie.

  • Great post , this resolves a problem I was having trying to over lay a flash virtual tour.

    Thank You keep up the good work!
    Pete

  • David says:

    well done Robert Nyman

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>