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 t

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

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