How do I place HTML content above a Flash movie?

Question

A site I'm working on has Flash headers (using swfobject to embed them). Now I'm required to code in a bit of HTML that's supposed to overlap the Flash movie.

I've tried setting z-index on the Flash element's container and the (absolutely positioned) div but it keeps "vanishing" behind the Flash movie.

I'm hoping for a CSS solution, but if there's a bit of JS magic that will do the trick, I'm up for it.

Update: Thanks, setting wmode to "transparent" mostly fixed it. Only Safari/Mac still hid the div behind the flash on first show. When I'd switch to another app and back it would be in front. I was able to fix this by setting the div's initial styles to display: none; and make it visible via JS half a second after the page has loaded.

Could you put together a working example, because I have the same problem and can't get it to work, it'd be nice to see if it's me or my browser.. — Svante Svenson, Jan 21 '09 at 16:31

score 20 · Accepted Answer · answered Sep 23 '08 at 20:10

20

Make sure the FlashVar "wmode" is set to "transparent" or "opaque," but NOT the default, "windowed"... then you should be able to use CSS z-index

answered Sep 23 '08 at 20:10

Steve Paulo

17,954
2
23
23

1

wmode is like a golden idol buried in the deepest jungles of south america. I remember I was ecstatic the first time I heard about it. – matt lohkamp Sep 23 '08 at 21:13
1

Just keep in mind that it doesn't work with Linux browsers except with the beta of Flash 10 and very recent browsers (Fx 3.0.0+, Opera 9.50+, don't know about others) – Michael Johnson Sep 24 '08 at 05:46
3

How many Linux users DON'T keep their browsers and associated programs up-to-date? That's a savvy-by-definition demographic. – Steve Paulo Sep 24 '08 at 16:22
A certain quite large subset of linux users also run flash/swf killing browser plugins on principle, so I try not to worry too much about them when developing. – defmeta Sep 29 '08 at 15:12
The differences between these modes: http://stackoverflow.com/questions/886864/differences-between-using-wmode-transparent-opaque-or-window-for-an-embe – JDandChips Dec 08 '14 at 15:07

score 4 · Answer 2 · answered Sep 24 '08 at 09:00

4

Follow-up note: As you found in your update, getting HTML to display on top of Flash is currently a finicky proposition, and even with the JS magic you found you should expect that the Flash will block out your HTML for some viewers using off-browsers, older versions, and so on.

If reaching an arbitrarily large browsing audience is important to you (mobile devices, for example), then redesigning your content to avoid the overlap may save you headaches in the long run.

answered Sep 24 '08 at 09:00

fenomas

11,131
2
33
57

You're right of course. In this case the client doesn't care but it's sound advice in general. – Lasar Sep 24 '08 at 11:00
The other question in this case, however, is how many mobile devices support Flash? The iPhone, I'm sure, maybe some of the Windows Mobile smartphones, but after that? (also, I'm not well-versed in mobile web dev, so I really don't know...) – Steve Paulo Sep 24 '08 at 16:21
Steve: strike that, reverse it! Most modern smartphones support Flash, except the iPhone, which does not. Specifically, most modern phones (i.e. those with web browsers) have Flash Lite, usually version 2.x or 3.x. Flash Lite 2.x is roughly similar to Flash 6, and Lite 3.x is similar to Flash 8. – fenomas Sep 25 '08 at 03:21

score 1 · Answer 3 · answered Jun 15 '14 at 09:04

use code in following style, it works in Firefox and chrome

<object id='myId'  width='700' height='500'>
            <param name='movie' value='images/ann/$imagename' />
            <param name='wmode' value='transparent' />
            <!--[if !IE]>-->
            <object type='application/x-shockwave-flash' data='images/ann/$imagename' width='700' height='500' wmode='transparent'>
            <!--<![endif]-->
            <div>
                <h1>Please download flash player</h1>
                <p><a href='http://www.adobe.com/go/getflashplayer'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a></p>
            </div>
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>

score 1 · Answer 4 · edited Feb 24 '17 at 08:26

1

I would like to add, that you have to remember to set WMODE parameters ("transparent") in both OBJECT and EMBED tags!

Follow the link for details: http://kb2.adobe.com/cps/142/tn_14201.html

edited Feb 24 '17 at 08:26

Abhishek Pandey

13,302
8
38
68

answered Aug 03 '11 at 22:12

Nassim Chikh

11
1

score 0 · Answer 5 · edited May 03 '10 at 20:39

0

Set this flash variable like this

s1.addParam("wmode","transparent");

then in the div tag use this style

style="z-index:inherit;

The problem will be solved.

edited May 03 '10 at 20:39

sth

222,467
53
283
367

answered Dec 29 '08 at 08:53

score 0 · Answer 6 · answered Dec 29 '08 at 16:03

Like Steve Paulo said, then comes the fun part when the HTML that's sitting on top of your flash is calling more flash...

Oh the fun we had with that one, which involved setting the z-index to be actually be lower to account for flash thinking it's the bees knees and therefore must always be on top.

How do I place HTML content above a Flash movie?

6 Answers6

Linked