I want to embed a swf over a html page, like a floating video watching panel. I already have a swf file which will automatically adjust its size according to the browser size, and the swf file is partially transparent. I thought I can just add a div tag, make the position absolute and change z-index bigger, but that doesn't work because the swf just replaced everything that's on the page.
Here's what I did
<script>
swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>
<body bgcolor="#000000">
<div id="header"></div>
<div id="shell">
things in my html
</div>
</body>
#header {
position:absolute;
z-index:100;
}
Any idea? Thanks.
Once you get your sizing to work properly you will need to set the wmode to transparent to be able to see what's behind the flash, if you don't it's background will be opaque.
This is a quick copypaste from the swfobject docs, but it should get the point across:
<script type="text/javascript">
var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>
I believe the problem with this is that the CSS doesn't work well with <object /> tags. The swfobject.embedSWF turns the <div id="header"></div> into an <object /> tag with a bunch of attributes that might be effecting the CSS. If you create a wrapper DIV around the header DIV and apply the CSS to the wrapper DIV, everything works better. You also need to add 100% width and height in the CSS. Here's the revised source:
<script>
swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>
<body bgcolor="#000000">
<div id="wrapper">
<div id="header"></div>
</div>
<div id="shell">
things in my html
</div>
</body>
#wrapper {
position:absolute;
z-index:100;
width:100%;
height:100%;
}
