Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I place HTML content above a Flash movie?

Tags:

html

css

flash

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.

like image 289
Lasar Avatar asked Sep 23 '08 20:09

Lasar


4 Answers

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

like image 110
Steve Paulo Avatar answered Oct 16 '22 19:10

Steve Paulo


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.

like image 26
fenomas Avatar answered Oct 16 '22 21:10

fenomas


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>
like image 35
Khadka Pushpendra Avatar answered Oct 16 '22 19:10

Khadka Pushpendra


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

like image 36
Nassim Chikh Avatar answered Oct 16 '22 19:10

Nassim Chikh