SWF as HTML background

gr8jedimaster

unread,

Oct 9, 2008, 10:18:45 PM10/9/08

to SWFObject

Greetings,

I have spent hours looking for a solution to use a SWF movie as a web
page background, with the page content to render on top of the SWF
movie (in my code below, content is the div id= "textContent"). So
far, I have succeded in doing so with IE7, Opera 9.6, Chrome
0.2.149.30 but NOT in FF 3.0.3. Any help will be highly appreciated.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject 2 full browser flash</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css" media="screen">
html, body, #content
{
height: 100%; width: 100%;
}
body
{
margin: 0;
padding: 0;
overflow: hidden;
}
#altContent
{
/* style alt content */
}
#textContent
{
color: #FFFF00;
font-size: x-large;
width: 500px;
margin: 0;
padding: 0;
position: absolute;
top: 150px;
left: 50px;
z-index:99;
}
</style>

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>

</head>
<body>
<div id="content">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
name="myId" width="100%"
height="100%" id="myId">
<param name="movie" value="undersea.swf" />
<param name="wmode" value="transparent" />

<object type="application/x-shockwave-flash"
data="undersea.swf" width="100%" height="100%">


<div id="altContent">
<h1>
Alternative content</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>


</object>

</object>
</div>
<div id="textContent">
Some content here to float above the SWF.
</div>
</body>
</html>

Philip Hutchison

unread,

Oct 9, 2008, 10:52:10 PM10/9/08

to swfo...@googlegroups.com

if you're using the static publishing method, you have to duplicate your wmode <param> element inside each object.

------------

<object type="application/x-shockwave-flash" data="undersea.swf" width="100%" height="100%">
         <param name="wmode" value="transparent" />

alt content

</object>
   

</object>

------------

also, if the SWF is going to be *under* the HTML, don't use wmode transparent... use wmode opaque instead. it's less buggy and uses less processing power.

- philip

gr8jedimaster

unread,

Oct 10, 2008, 12:44:22 AM10/10/08

to SWFObject

Philip, your solution worked! Thank you very much!

On Oct 9, 7:52 pm, "Philip Hutchison" <platelu...@gmail.com> wrote:
> if you're using the static publishing method, you have to duplicate your
> wmode <param> element inside each object.
>
> ------------
>
> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="myId"
> width="100%" height="100%" id="myId">
> <param name="movie" value="undersea.swf" />
> <param name="wmode" value="transparent" />
>
> 
> <object type="application/x-shockwave-flash" data="undersea.swf"
> width="100%" height="100%">
> <param name="wmode" value="transparent" />
> 
>
> alt content
>
> 
> </object>
> 
>
> </object>
>
> ------------
>
> also, if the SWF is going to be *under* the HTML, don't use wmode
> transparent... use wmode opaque instead. it's less buggy and uses less
> processing power.
>
> - philip
>

> > shared/download_buttons/get_flash_player.gif<http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif>

Philip Hutchison

unread,

Oct 10, 2008, 1:02:22 AM10/10/08

to swfo...@googlegroups.com

cool beans, happy to help. :)

Reply all

Reply to author

Forward