How to embed swf over html page?
I want to embed a swf on top of a html page like a floating video preview pane. I already have a swf file that will automatically adjust its size to fit the browser and the swf file will be partially transparent. I thought I could just add a div tag, make the position absolute and change the z-index more, but that doesn't work because swf just replaced everything on the page.
This is 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? Thank.
source to share
Once you get the correct size setting, you will need to set the wmode to transparent to see what's behind the flash if you don't want the background to be opaque.
This is a quick copy from the swfobject docs , but it should get the point:
<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>
source to share
I believe the problem is the CSS is not working with tags <object />
. swfobject.embedSWF
turns <div id="header"></div>
into a tag <object />
with a bunch of attributes that can affect CSS. If you create a DIV wrapper around the DIV header and apply CSS to the DIV wrapper, things work better. You should also add 100% width and height in your CSS. Here's a 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%;
}
source to share