Placing HTML Elements Over a Flash Movie

Sometimes you might want your SWF to go under some page elements. This has always been a tough nut to crack for Flash developers, because the Flash Player always writes the SWF on the topmost layer of the page, regardless of z-index order. This is especially annoying for people who use CSS-based menus, such as the famous Suckerfish menu method.

The answer is to use wmode="opaque" combined with positioning in your CSS.

Start by establishing the position relationship between the element you want to place over the SWF (we'll call this the overlay element) and its parent. I won't get into how CSS positioning works; it's covered well enough on other sites, such as CSS-Tricks.

In the examples presented here, the SWF will be embedded in a div that has a wrapper div. This wrapper div has established its position through the declaration position: relative; which allows us to control the overlay's placement via position: absolute.

#wrapper { position: relative; }
#overlay { position: absolute; }
 
/* 
    Look ma, no code!
    We don't need to specify any
    CSS for the Flash SWF's <object>.
*/
#flash { }

Next, make sure the wmode is set to "opaque". SWFObject 2.x's dynamic publishing method makes this a breeze; just add the parameter to the "params" object:

var flashvars = {};
var params = { wmode: "opaque" };
var attributes = {};
 
swfobject.embedSWF("movie.swf", "flash", "550", "400", "7",
                  "expressinstall.swf", flashvars, params, attributes);

Setting wmode with SWFObject 2.x's static publishing is equally easy:

<object id="flashcontent" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
   <param name="movie" value="movie.swf" />
   <param name="wmode" value="opaque" />
 
   <!--[if !IE]>-->
   <object type="application/x-shockwave-flash" data="movie.swf" width="550" height="400">
   <param name="wmode" value="opaque" />
   <!--<![endif]-->
 
      <p>Please update your Flash Player</p>
 
   <!--[if !IE]>-->
   </object>
   <!--<![endif]-->
 
</object>

Reminder: SWFObject's static publishing requires setting the the wmode param for each object.

Demos: static publishing | dynamic publishing