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 responses to “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. 54 kw

    server no2 doesn’t work. 403 forbidden

  4. Oops, I forgot to chmod +r. Fixed. :-)

  5. Bastiaan

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

    Can this also be done with java applets?

  6. Bastiaan

    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.

  7. ismail

    can anyone help about how to put a layer above a java applet ?

  8. BtG

    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.

  9. Whit

    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.

  10. Whit

    One more example without iframes or a special JavaScript:
    http://particletree.com/examples/flashunderlayer

    There are scripts, but it doesn’t look to me like any of them have anything to do with the layering.

  11. FYI:

    Quote: “…BestBuy.com would seem to dispute that this only works in Gecko…”

    Well, all those examples for HTML on top of (higher z-index) Flash, also see http://www.communitymx.com/content/source/E5141/wmodeopaque.htm for one more, work in FF 2.0 in WinXP but not in FF 2.0 in Linux. I’m using FP9 (XP) and FP9-beta (Linux).

    So saying “firefox” is not enough when one says works/doesn´t”.

  12. I forgot to mention that example http://beta.aviary.pl/marcoos/flashlinux/ DOES work in my FF 2.0 Linux – it is the only one that does. So the ugly iframe hack saves the day… (or it doesn’t if one doesn’t want such dirty hacks).

  13. 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.

  14. priyanka Aggarwal

    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.

  15. ankit

    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.

  16. ultr

    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.

  17. siarlis

    No Javascript
    No Iframes

    only css styling

    works on firefox, ie 6 , opera

    http://test.metroweb.gr/html_over_flash/

    I hope it helps

  18. siarlis: Your code does NOT work on Linux. This is why the iframe hack is needed.

  19. siarlis

    woopz i understand …….

  20. suresh babu

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

  21. Ziga Dolhar

    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?

  22. Pingback: GSIY … Ruby-Rails Portal

  23. MacUsers

    Hi guys, did anyone get any work around for displaying transparent DIV over the flash movie? It looks very ugly on Linux.
    http://www.littlehome.co.uk/LH-2007/Body2.php
    I checked with Safari and FF on Mac; it’s fine in there.

  24. Martin

    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?

  25. fredrik

    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?

  26. Pingback: Computer … and maybe more » Blog Archive » Trilulilu unde e meniul meu ?

  27. Idetrorce

    very interesting, but I don’t agree with you
    Idetrorce

  28. Hi, I have this problem on dynamic menu at http://www.qarbon.com. On FF in linux meu is still under FLASH banner. There is wmode transparent, but still don’t work. Any solutions? Thanks

  29. 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 ?

  30. DZ

    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?

  31. neo

    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)

  32. gbon

    check out the page http://www.ufc.com which have transparent menu over flash

  33. Pingback: Menu verschwindet hinter Flash - TYPO3forum.net

  34. Pingback: Firefox wmode problem under Linux

  35. BiGmRoT

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

  36. Luqman

    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.

  37. 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

  38. Indigo Calling

    Is there a way to link the submenus and to have more then just one.

  39. 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?

  40. i think this is the relevant ff bug which is marked as fixed is

    https://bugzilla.mozilla.org/show_bug.cgi?id=137189

    comment around #131->133 indicate that the open source flash player swfdec is making progress (if you feel up for some compiling)

    http://lists.freedesktop.org/archives/swfdec/2008-April/001426.html

    so linux if fscked again by yet another binary blob, thx adobe.

  41. Pingback: Cyril - Mes astuces» Archive du blog » Mettre un div au dessus d’un flash

  42. Pingback: YouTube Embed immer ber DropDown Script - html.de Forum - HTML fr Anfnger & Fortgeschrittene

  43. Thanks for posting this. It works great.

  44. Pingback: The Viddler Blog » The story behind Viddler’s new navigation

  45. That’s cool example! Great!

  46. estelka

    i can only say.. i love Ya :D

  47. Pingback: Div Elemente verschwinden hinter Flashobjekten

  48. 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

MDN

Better JavaScript docs for a better Web on MDN

Archiwum

%d bloggers like this: