HTML div above a Flash animation on Linux – it’s possible!

Yes, it is really possible if only you’re using a Gecko-based browser like Firefox. If you used the pull-down menu on Google Video, you have already even seen it in action.

So, how did Google do it? Well, I analyzed their code and the answer is simple: they put an iframe between the Flash and the div using z-index. Hey, you tried it and it didn’t work? That’s because it needs a little hack: the iframe’s CSS “display” property must be set to “none” at first (style=”display: none”) and be changed to “block” via JavaScript after the <embed> element is rendered. With this hack – it works!

So, take a look at the example. For your convinience, I’ve mirrored it on three servers:

  • server 1 (pertus.com.pl, Legnica, Poland)
  • server 2 (students’ server at the Opole University of Technology, Opole, Poland)
  • server 3 (AviaryPL Team’s server at the Szczecin University of Agriculture, Szczecin, Poland)

OK, before you slashdot or digg this, please don’t link to the examples directly. Link to this post only.

53 thoughts on “HTML div above a Flash animation on Linux – it’s possible!

  1. Is it only for linux? On windows I don’t see any div on top (?)
    .. other thing that it’s probably more appropriate to use ‘on top’ instead of ‘above’ term. ‘Above’ suggested to me that you want to precede flash object with div in document.. like above on y axis

  2. For Windows you also need the usual wmode=”transparent”. I’ve just added it to the example.

    And “above” here means ‘above on the z-axis”. :)

  3. Wonderfull!! I have been looking for a sollution for weeks now.

    Can this also be done with java applets?

  4. Well, to answer my own question: Yes you can also get a HTML div layer on top of a java applet. However, I needed something else (dynamic menu) and I can’t get that to work.

  5. Thanks for the info marcoos. Very useful. Thought everyone may like to know that you can use the same empty iframe hack to stop dropdowns showing through divs in IE – very annoying bug.

  6. Just in case anyone’s still checking this thread, BestBuy.com would seem to dispute that this only works in Gecko browsers (roll over the top nav to see a menu sit on top of the middle Flash movie, which works in IE6 and Safari). The problem is, I’m having trouble figuring out how. I’m a relative rookie when it comes to CSS-based design and my own efforts have proven fruitless. I’m not sure if they use any JS tricks, but I’ve searched the HTML and CSS code and iframes are not involved.

  7. FYI:

    (Thanks to running multiple OSs for just such x-browser testing purposes using VMware…) I just tested this iframe hack example page in FF2 (XP and Linux), IE7 (XP) and IE6 (Win98) – works in all modern browsers. I only tested with FP9 in all cases though.

  8. can u please help me with the Html code for running flash in firefox, the code which i have is running only in microsoft internet explorer.

  9. hey priyanka,

    try using swfobject. it’s a free js file available on internet and easy to learn.For code assistance u can ping me anytime.

  10. Nice, but if you place a transparent div (style.opacity=0.XX) or a div with background set to a semi-transparent PNG over the flash created in this way, the flash content wont be visible “under” the div.
    In windows it even allows me to play flash video (for example from youtube) and place semi-transparent div over it, and it sums transparency on the run.

    I think it is Adobe fault – on Linux the Flash plugin behaves in this way both on Firefox and Opera and maybe other browsers. So instead of creating hacks we should contact Adobe and force them to correct their product. Linux browsers are not Internet Explorer to build hacks for them.

  11. Is it possible to make iframe transparent by keeping flashobject behind.
    help needed

  12. In this example, “HTML DIV!”‘s background is set to white. If I remove the background property, it becomes transparent in Firefox, but remains white in Internet Explorer (IE7).

    How can I make it trully transparent?

  13. This is great. I have battled with this on linux for a while with bad hacks. (…hiding divs with flash temporarily, etc.)

    I wish it worked on Windows without wmode transparent. I’m having an issue getting a div from a menu over an advertisement that we don’t have control over. We can’t set wmode.

    Does anyone know of a similar hack for windows that works for a SWF that does not have wmode set to transparent?

  14. hi

    when i try this, it works greate, but one thing comes up.
    In the LAYER ON TOP it writes out FALSE befor the image content. Why?

  15. Hi,

    I tried this technique for the site I’m coding, but I don’t know why in FF2.0.0.11 Windows & Linux it raises a js error like “Ns component initialisation failed while creating iChannel” or something like this.
    about:blank is not a better choice… I want to put a layered menu “above” the flash, with transparency effects.
    But, even with removing the background property of the iframe, the background is still while (this is for windows and linux…).

    Have a look: http://www.pokemon-france.com

    Note: the solution explained here IS NOT yet installed. For tests, I guess save page (html only), adding a tag and modifying page locally would do…

    Any idea ?

  16. I’ve got the same probleme as a lot of personns here.

    I used to work on windows. I have to use the code on linux-firefox.
    This solution works, but the iframe can’t be transparent, the iframe is still white.
    Any solution?

  17. thank you. the iframe hack just works. I’ve tried on sample page. But unlucky, i try to put images in the div and set the iframe to allowtranparency = true.
    And se inner the iframe is background transparent. but the images dosen’t show properly over white background (transparent not works)

  18. Hi, is this possible to make it work with SWFobject JS script? It would be great, thx for your help ;)

  19. hi, thanks friends.I was searching for this code to embed two flash movies in one page and play in firefox smoothly.i used i fram method and its working.

  20. Here is the solution to css / js menu that won’t show on top of the flash movie. It combines this idea with another javascript menus. You can probably adapt it to any kind of dropdown. You only need to make the iframe appear and disappear (display:block display:none) when your menu comes up and down.
    Link:
    http://www.isayjesusis.com/css

  21. Indigo: I don’t have an answer for you, but the point of this thread is that example that you’re using is broken on Linux systems. The object loads behind the flash and the flash cannot be set to transparent without a dirty hack like the one this thread’s about. I can’t believe this issue has existed for years now and has not been addressed by adobe.

    Has anyone tried to apply this hack to a drupal theme?

  22. I have html code on top of a flash animation at slowmotionriot.com/videos if anyone doesn’t believe it’s possible

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s