geekswithblogs.net

Steve Clements

.Net and then some....


News

Search



MCP

Add to Google
Add to Technorati Favorites



Subscribe to this Blog by Email


this is Steve's profile
Locations of visitors to this page

My Stats

  • Posts - 125
  • Comments - 253
  • Trackbacks - 38

Twitter












Tag Cloud


Recent Comments


Recent Posts


Archives


Post Categories


Image Galleries


Fav Blogs


Fav Places


Services!


Top Kudos


<< Developing Vista Sidebar Gadget | Home | MP3 player – which one?? >>

Flash swf object in html: z-index



Yesterday I came across a right little pain in the butt!  I found that swf objects display on top of all layers regardless of z-index.

I found the solution was to add this line in the markup.

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

Problem is this doesn't work in firefox, does anyone have a cross browser solution to this???

Thx


posted @ Saturday, March 03, 2007 12:21 PM |

Comments

Gravatar # re: Flash swf object in html: z-index
Posted by Sean on 3/5/2007 10:40 PM
Steve,

You may want to look at setting specific z-index values on the object tag and the container element that it resides in using CSS. I ran in to this issue as well on a site where a top navigation menu was dropping behind a flash video.

I am using the swfobject javascript by Geoff Stearns (awesome bit of js) (http://blog.deconcept.com/swfobject/) to render the flash content. I also set specific z-indexes on the div containing the flash, and the menu items that were dropping behind it previously.

It seems to be working for me in Firefox 2.0.0.2 and IE 7.

Hope this keeps you from banging your head on the wall too much!

Sean
Gravatar # re: Flash swf object in html: z-index
Posted by reztart on 9/17/2007 11:50 AM
try to change "/someMovie.swf" to "someMovie.swf" when works in firefox for me =)
Gravatar # re: Flash swf object in html: z-index
Posted by Paul on 3/26/2008 4:18 PM
just to add to Sean's post, to make sure it works be sure to set:
so.addParam("wmode", "transparent");
on your swfObject to get z-indexing to work, even if you don't need your swf to have transparency.
Gravatar # re: Flash swf object in html: z-index
Posted by Tony on 5/12/2008 10:42 PM
I first set my menu container to z-index:2 (in a masterpage) and the contentplaceholder (.net website) container div to z-index:1. Nothing changed until I did what Paul said and added wmode transparent in the swfobject javascript. The flash movie is in the contentplaceholder and it was covering my menu.

Not no more. :) Good call Paul.
Gravatar # re: Flash swf object in html: z-index
Posted by Seth on 7/24/2008 7:53 PM
Yeah well what if im using "dynamic publishing" how do i set the wmode property then? This does me no good.

Im just ranting here, but it seems like Google Code skimped out on the functionality. Some how I don't think its too much to ask for them to have some methods or additional arguments to set the transparency and depth because those parameters alone can make or break flash in an HTML environment.
Gravatar # re: Flash swf object in html: z-index
Posted by Warren on 7/29/2008 8:41 PM
I am using the swfObject code that Sean and Paul referenced (http://code.google.com/p/swfobject/).

I am having trouble with my .swf file displaying on top of all layers on a site.

I believe that I need to set z-index values and insert the following code: so.addParam("wmode", "transparent"); just as Tony did.

Where in the swfobject javascript do I insert that code?
Gravatar # re: Flash swf object in html: z-index
Posted by Rocky on 8/22/2008 4:30 PM
for swfobject 2.1 add the following to your code:

<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("yourflash.swf", "productsSWF", "969", "190", "8","expressInstall.swf", flashvars, params, attributes );</script>
Gravatar # re: Flash swf object in html: z-index
Posted by saran on 8/29/2008 9:08 AM
You should also include "<embed src="...." wmode = "transparent" ... ... ...></embed>" tag inside of the object tag. Then check this in all browsers.

I include this and check in various browsers it works fine.


Regards,
Saran
Gravatar # re: Flash swf object in html: z-index
Posted by Pygmees on 9/5/2008 6:43 PM
Hi, apparently swfobject doesnt work with google chrome...
Gravatar # re: Flash swf object in html: z-index
Posted by MarkStar on 9/12/2008 12:46 AM
Just doing this myself. The work around is to add two attributes, which work seperately for FF3 and IE7:

<param name="wmode" value="transparent">

wmode="transparent"

EG:
......<param name="wmode" value="transparent">
<embed src="images/header.swf" wmode="transparent" width="774" height="200" .....
Gravatar # re: Flash swf object in html: z-index
Posted by Pascal on 9/14/2008 10:10 PM
For Google Chrome I added, as previously said, wmode="transparent" into the new embeded code according to Dreamweaver CS4
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="497" height="68" wmode="transparent"> and the transparency works fine.
Gravatar # re: Flash swf object in html: z-index
Posted by Bob Hinrichs on 10/29/2008 9:31 PM
There is a catch-22 with the wmode setting. It appears you need to set the wmode in order to get your other div to appear on top of the flash. But this creates a condition in IE where arrow keys continue to scroll the page even when the flash item has the focus, which renders games unplayable. Some have suggested using javascript to trap the key events when the game is being played, but this seems a rather involved workaround to what is really a bug.
Gravatar # re: Flash swf object in html: z-index
Posted by PRODATA on 12/4/2008 3:31 PM
Thanks. This pointed me in the right direction. An example of a working implementation is below:

<script src="swfobject.js" type="text/javascript"></script>
<div style="float:right;z-index:-100;" id="player">
This text will be replaced
</div>
<script type="text/javascript">
var so = new SWFObject('slideshow.swf','mpl','310','310','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('height','310');
so.addVariable('width','310');
so.addParam("wmode", "transparent");
so.write('player');
</script>
Gravatar # re: Flash swf object in html: z-index
Posted by canvas wall art on 12/15/2008 2:51 AM
Great,I've been looking for this for quite a while. Looks like swfobject.js is what I should use. I have a question: where I should put this javascript, should I put the javascript code into a onload function of body tag to make the whole thing work?

Thank you for your help.
Gravatar # re: Flash swf object in html: z-index
Posted by Caleb F on 12/17/2008 5:32 PM
Boy was I beating my head against the wall on this one. SWFobject and wmode transparent was the key to include the SWF within the DOM making z-index functional. Look for the SWFobject 2.0 code generator on Google Code Base. Really helped me on this one.
Gravatar # re: Flash swf object in html: z-index
Posted by Dragos Stancu on 1/16/2009 2:49 PM
it works!! thanks guys!
Gravatar # re: Flash swf object in html: z-index
Posted by Jaret on 5/21/2009 2:15 PM
This thread was very informative. Thanks to everyone
Gravatar # re: Flash swf object in html: z-index
Posted by digital on 6/17/2009 10:30 AM
wmode = "transparent"

that's all you need
Gravatar # re: Flash swf object in html: z-index
Posted by WebG on 6/18/2009 9:21 AM
Ey... I'm doing a website with a form wizard as a swf object. I used the wmode = "transparent", and everything, which works great in the design of the page, due to the z-index layering. But functionality-wise for some reason the text fields in the swf no longer work. Any advice?
Gravatar # re: Flash swf object in html: z-index
Posted by motofzr1000 on 7/3/2009 8:05 AM
I'm also running into a problem with wmode="transparent" & textfields. There are a few dynamic textfields in my swf, on the right side of the stage, and when I click anywhere in the stage of the swf in Firefox, on each click the textfields show up in the top left corner of the swf. Without wmode="transparent" I'm not having this problem. Any suggestions ?
Gravatar # re: Flash swf object in html: z-index
Posted by Toan Nguyen on 7/7/2009 10:42 PM
try so.addParam("wmode","opaque");
Gravatar # re: Flash swf object in html: z-index
Posted by Vincent on 7/14/2009 7:37 AM
This worked for me:

......<param name="wmode" value="transparent">
<embed src="images/header.swf" wmode="transparent" width="774" height="200" .....

In both IE and FF! :D
Gravatar # re: Flash swf object in html: z-index
Posted by Bob on 8/3/2009 7:56 PM
Just found this post and it works real well for me. Thanks!!

This is all I had to do to a YouTube video...

<object width="400" height="300">
<param name="movie" value="http://www.youtube.com/v/-_XQ2NSPuiU&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="transparent" />
<embed src="http://www.youtube.com/v/-_XQ2NSPuiU&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300" wmode="transparent">
</embed></object>

Nice!!
Gravatar # re: Flash swf object in html: z-index
Posted by Prasad on 8/6/2009 2:46 AM
Hi there,
I had same problem, flash object covering drop down menu.
Below code worked for me.
<param name="wmode" value="transparent" />
Thanks!!
Gravatar # re: Flash swf object in html: z-index
Posted by sd on 8/7/2009 5:20 PM
thank you very mutch
Gravatar # re: Flash swf object in html: z-index
Posted by Moderator on 8/28/2009 10:13 AM
it wasn't working for me but now its workng.

By simply using the wmode value=transparent.

here's an working example.


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="800" height="600" id="Album.swf" align="middle">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="Album.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<param name="wmode" value="transparent" >
<embed src="Album.swf" wmode="transparent" quality="high" bgcolor="#ffffff" width="800" height="600"

name="Album.swf" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>


NOTE: you may notice that the values are rpeated in the above code. wmode value is given twice. this exactly is what i important else your flash/swf will alway overlay the other layers.

So even ifyou've set wmode value to transparent, even then make the second set of comnd to include it again. the above set is for IE and has no effect on firefox, chrome, opera. n second set is for all except IE
Gravatar # re: Flash swf object in html: z-index
Posted by Jonas Lampe Persson on 9/7/2009 4:25 AM
This was about to drive totally crazy. Althought I think that swf object i very good, this like this should be noted more clearly on the offical website.

Thanks for the help!
Gravatar # re: Flash swf object in html: z-index
Posted by Mike on 9/13/2009 7:19 PM
looks like setting the wmode allows for z indexing of the flash movie with swfobject. I had issues with mootools multibox appearing in the wrong stacking order with my flash swfobjects, but setting the wmode to transperant or opaque as user above noted worked.
Gravatar # re: Flash swf object in html: z-index
Posted by Mike on 9/13/2009 7:22 PM
Just wanted to add that I've had problems with wmode:transperant before to where the functionality of my flash movies becomes screwy, so I personally try to avoid using that whenever possible which is why I feel alot more comfortable setting the keeping the wmode to opaque. It's no fun trying to find a bug in my code for hours only to realize it wasthe wmode being set to transperant that was the problem. FYI...Awesome thread by the way. VERY useful. Thought this one was going to take a lot longer to solve.
Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification: