Layer Flash Under HTML

Flash and Positioning XHTML Div Layers

Is there a way to have a flash movie play below another layer like an html text heading or div tag?

Position Flash Below Html ElementsAnswer: Yes, this is actually fairly simple but is a several part process depending on how may different items you would like to position above the flash element.

1. First you must add the wmode parameter transparent to the flash object that is going to be embedded.

Like so…  <param name="wmode" value="transparent" />

(note:) If you are using the swfobject.js method to embed your flash files (recommended) you can add the transparent parameter by simply using the example below to append to your current setup:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "movie", "700", "300", "#ffffff");
   so.addParam("wmode", "transparent");
   so.write("flashcontent");
</script>

 

2. Now we need to wrap our flash movie in its own div tag and and apply some css so that we can set the position to be below the header text and description div.
(See example below for xhtml and css code.)

<div id="header">

<div id="flash">flash file goes here.</div>

</div> 

And the accompanying css for the above is:
(note the z-index and absolute position for #flash div)

#flash {
    width: 700px;
    height: 300px;
    position: absolute;
    z-index: 0;
}

#header {
    height: 300px;
    margin-bottom: 30px;
    text-align: left;
}

 

3. Ok, now lets go ahead and set up the html layers that will be displayed displayed above our flash content. In this case it will be an h1 header and a description that is in its own div that is above the flash media.

(Two items to be positioned over the flash movie)

The h1 css is: (note: feel free to style it however you want or use a different tag, the important thing is the z-index and absolute position.

h1 {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #666666;
    font-weight: bold;
    position: absolute;
    z-index: 1;
}

 
Now for the description css which is going to be in its own div tag containing text and will be positioned above the flash element as well: (note the z-index and the absolute position again)

.description {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFFFFF;
    margin-left: 15px;
    margin-top: 35px;
    padding: 5px;
    font-weight: bold;
    line-height: 14px;
    position: absolute;
    z-index: 1;
}

4. Thats it, the finished code in the body of a web page will look like this:
(note: Code is placed in the header div which has no z-index or absolute position necessary)

<div id="header">

<div id="flash">flash file goes here.</div>

<h1>Heading Text</h1>
<div class="description">Your description text</div>

</div>

And the final accompanying CSS is:

h1 {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #666666;
    font-weight: bold;
    position: absolute;
    z-index: 1;
}

.description {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFFFFF;
    margin-left: 15px;
    margin-top: 35px;
    padding: 5px;
    font-weight: bold;
    line-height: 14px;
    position: absolute;
    z-index: 1;
}

#flash {
    width: 700px;
    height: 300px;
    position: absolute;
    z-index: 0;
}

#header {
    height: 300px;
    margin-bottom: 30px;
    text-align: left;
}

HTML Layers and Flash Position Summary:

How to layer a Flash movie below another html div tag or layer.

To position a flash movie under another html element basically you just need to give the flash move a parameter of wmode transparent and position it absolutely with a z-index of 0. Do this by putting the flash object in its own div and using css. (see examples above)

For the items that you would like positioned above the flash movie set their z-index to 1 and position them absolutely as well. After that it’s just a matter of putting it all in the div or container that you would like applying the css and adjusting the margin and padding to your specific needs.  

  4 comments for “Layer Flash Under HTML

  1. Dylan
    May 5, 2009 at 5:53 pm

    Very Nice!

  2. sven
    July 22, 2009 at 1:58 pm

    you just saved me 2 days work with this suport 🙂
    after 2 days making an intro ,1 stupid move,3 packs of smookes and 2 hours googling this was just what i needed hehe, thx for that !!!

  3. Dylan Wagstaff
    July 23, 2009 at 7:14 am

    Your welcome,
    Cheers 🙂

  4. Kristen
    July 27, 2011 at 10:00 am

    Is there any chance you can help me out with this code? I used it on a page which renders correctly in Safari but not in IE. In IE the table and flash element that I’m trying to position bump out far to the right.

Comments are closed.