Placing a Div in Front of a Flash Embed

Placing a div in front of a flash embed

In your flash applet tag, simply have this:

<object id='flashObject' ....>
    <param ....>
    <param name='wmode' value='opaque'>
    <embed ... wmode='opaque'>
    </embed>
</object>

That should take care of it.

Note that the downside of this is it slows down rendering for both the flash movie and page elements, but shouldn't be a problem in most cases.

Also, by including this as both an object param and an embed attribute, it works in all major browsers.

Edit, as per MidnightLighning's comment:

Once the flash object is prepared in this way, you need to float the div over the page, like so:

<body>
    <object> ... <!-- this is your flash movie --> </object>
    <div id="floater">The Floating Div</div>
</body>

Then create your CSS like this:

#flashObject { position:relative; z-index:1 }
#floater { position:absolute; z-index:100; top:0; left:0; }

How do I place HTML content above a Flash movie?

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

How to bring a div in front of a fullscreen flash

Here's how you do it. Make sure when embedding the swf you set wmode to transparent, here's a one page example for you. The overFlash div will appear over the movie. Hope this helps!

<html>
    <head>
        <title>test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #ffffff;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { width:100%; height:100%; }
        #overFlash{padding:20px;background-color:#D9D9D9;width:150px;position:absolute;left:300px}
        </style>
    </head>
    <body>
        <div id="overFlash">
            OVER FLASH!
        </div>

        <div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="test" align="middle">
                <param name="movie" value="test.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="transparent" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="test.swf" width="550" height="400">
                    <param name="movie" value="test.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="transparent" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>

How can I place a div on top of an embedded video player in chrome

When you tried adding a z-index, did you specify positioning? z-index only works on positioned elements. so I added position: relative to both. Is this the effect you were going for?

http://jsfiddle.net/QPXAT/1/

Why is my Flash animation overlaying my div position?

Try setting your wmode = transparent on the flash. This will keep flash from laying over top of everything no matter what z-index you set it to.

Div not appearing on top of embedded Flash player

https://jsfiddle.net/ecn65bdv/3/

<div style="position:absolute;width:1000px;height:25px;border:0px;solid #000;color:#052B8B">This is div</div>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="700" id="Kirchhoff" align="middle">
<param name="movie" value="Kirchoff.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="bgcolor" value="#ffffff">
<embed src="Kirchhoff.swf" quality="high" bgcolor="#DDB85F" width="900" height="700" name="Kirchhoff" align="middle" allowScriptAccess="sameDomain" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="opaque" />

Your object html is messed up. Your doing one object, but in your HTML you provided your suggesting you have an object tag and a seperate embed tag. Your div end tag is also messed up. See my fiddle. z-index did infact bring the div tag in front of the object.

Placing a Div in Front of a Flash Embed