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?
Answer: 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.