Geeks With Blogs

News
Steve Clements .Net and then some....

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 on Saturday, March 3, 2007 12:21 PM | Back to top


Comments on this post: Flash swf object in html: z-index

# re: Flash swf object in html: z-index
Requesting Gravatar...
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
Left by Sean on Mar 05, 2007 10:40 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
try to change "/someMovie.swf" to "someMovie.swf" when works in firefox for me =)
Left by reztart on Sep 17, 2007 11:50 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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.
Left by Paul on Mar 26, 2008 4:18 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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.
Left by Tony on May 12, 2008 10:42 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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.
Left by Seth on Jul 24, 2008 7:53 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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?
Left by Warren on Jul 29, 2008 8:41 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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>
Left by Rocky on Aug 22, 2008 4:30 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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
Left by saran on Aug 29, 2008 9:08 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Hi, apparently swfobject doesnt work with google chrome...
Left by Pygmees on Sep 05, 2008 6:43 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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" .....
Left by MarkStar on Sep 12, 2008 12:46 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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.
Left by Pascal on Sep 14, 2008 10:10 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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.
Left by Bob Hinrichs on Oct 29, 2008 9:31 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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>
Left by PRODATA on Dec 04, 2008 3:31 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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.
Left by canvas wall art on Dec 15, 2008 2:51 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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.
Left by Caleb F on Dec 17, 2008 5:32 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
it works!! thanks guys!
Left by Dragos Stancu on Jan 16, 2009 2:49 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
This thread was very informative. Thanks to everyone
Left by Jaret on May 21, 2009 2:15 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
wmode = "transparent"

that's all you need
Left by digital on Jun 17, 2009 10:30 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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?
Left by WebG on Jun 18, 2009 9:21 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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 ?
Left by motofzr1000 on Jul 03, 2009 8:05 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
try so.addParam("wmode","opaque");
Left by Toan Nguyen on Jul 07, 2009 10:42 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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
Left by Vincent on Jul 14, 2009 7:37 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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!!



Left by Bob on Aug 03, 2009 7:56 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Hi there,
I had same problem, flash object covering drop down menu.
Below code worked for me.
<param name="wmode" value="transparent" />
Thanks!!
Left by Prasad on Aug 06, 2009 2:46 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
thank you very mutch
Left by sd on Aug 07, 2009 5:20 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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
Left by Moderator on Aug 28, 2009 10:13 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
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!
Left by Jonas Lampe Persson on Sep 07, 2009 4:25 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
brilliant! name="wmode" value="transparent" fixed my issue
Left by web designer on Dec 06, 2009 11:06 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
My problem was my css based dropdown nav was not floating on top of my flash.
The z-index I added to my divs were doing nothing untill i added
<param name="wmode" value="transparent" />
Now it wroks like it should thx!

Left by Keith on Jan 03, 2010 8:25 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Legend !

Solved my z-index and cross-browser problem!
Left by Baraholka on Jan 13, 2010 11:39 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Legend, was driving me nuts...
Left by lds on Jan 29, 2010 8:15 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Yes! params.wmode = "transparent"; works great for the dynamicaly embeded swf using swfObject.

Thanks guys
Left by Mairum on Mar 04, 2010 9:23 AM

# wmode
Requesting Gravatar...
I put wmode="transparent" as an attribute in the embed tag of the object and it's working for me in IE,FF,Opera,Safari and Google Chrome.
Left by brainox on Mar 05, 2010 9:10 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
i actually tried <param name="wmode" value="transparent"> but its didn't seem to work when you are using jquery objects on the page. it works on just plane pages but once the javascript starts to do its thing I'm back to the same problem.
Left by budget on Mar 14, 2010 5:08 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Thank you, you've solve my problem Really...
Left by Sinan on Apr 23, 2010 5:05 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
use wmode=transparent for both embed and object, it worked on my midori and firefox browser
Left by EvNix on Jul 02, 2010 6:16 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Hey everyone,
So it seems lots of people are having success with this, but I'm not… here's the page that's having issues:
http://osi.joelhackney.name/details.php?refnum=8070

On all Mac browsers it works properly. But on windows browsers the swf floats above behind the top menu when you scroll down, also the alert box that shows when you add to cart sits behind the swf…

I have the SWFObject target div set to z-index:1; and the wmode="transparent" but no dice… Any suggestions!?
Left by Joel Hackney on Jul 06, 2010 2:29 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
<param name="wmode" value="transparent" /> worked until today when I upgraded Firefox and Flash Player. Now it is back to ignoring the z-index. It seems that Adobe do not want anything to be appearing above any swf movies.
My solution? Moved the menu to somewhere else so I don't have to keep revisiting all my sites each time Flash Player changes.
Left by Alex R on Jul 22, 2010 3:45 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
I cant seem to get it working on windows. I have upgraded to firefox also but still cant get anything to appear above the swf movies. Besides moving it to somewhere else, any advice?
Left by Canvas Paintings on Aug 03, 2010 4:41 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
You guys are the best. I did not use this drop down nav specifically but another jQuery example and the wmode was THE KEY to getting the flash to retreat behind the navigation.

Thanks again.
Left by jonnycodes on Aug 16, 2010 1:04 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Hi Steve,
Thanks for the post which solved a week long googling..
you made my day.. thanks
Left by Suresh on Sep 10, 2010 7:15 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Just wanted to say that this is the best post on this subject on the net. The so.addParam("wmode", "transparent"); is what worked for me. The problem I was experiencing was the same as everyone above with flash elements overriding a .js menu. An example of the entire code is below and it works fine in IE8 and FF3. Again two-thumbs up to all who contributed here.

<div id="flashcontent_28420" style="z-index:inherit;">
Flash Banner Placeholder.
</div>
<script type="text/javascript">
var so = new SWFObject("xmas-banner.swf", "flashcontent_28420", "750", "152", "7", "#");
so.addParam("wmode", "transparent");
so.write("flashcontent_28420");
</script>
Left by Don V on Dec 21, 2010 8:57 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
thanks for the help! best post on the subject by far!
Left by megesh on Jan 26, 2011 8:07 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
I was using a 3rd party menu tool and a 3rd party form tool, and the menu was going behind the form, just like everyone here has said. I'm not a coder, but I can recognize patterns, so when I saw so.addParam("wmode","transparent") mentioned in this post and saw where the 3rd party form developer had used so.addParam for other parameters, I inserted it and two weeks of teeth-grinding stress came to an end.
Bless you all.
By the way, this worked for me without using the z-index bit (which apparently works differently in IE than FF)
Left by maggie on Mar 05, 2011 4:02 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
A friend of mine tried this out.. and the reason it didn't work for him was that he messed up the placement of the variable "params".

His line:
swfobject.embedSWF("swf/index.swf", "flashObject", "1008", "440", "9.0.0", "swf/expressInstall.swf", { wmode: "transparent" });

Correct line:

swfobject.embedSWF("swf/index.swf", "flashObject", "1008", "440", "9.0.0", "swf/expressInstall.swf",{}, { wmode: "transparent" });

Notice the extra empty {} in there.
Left by seltar on Mar 09, 2011 3:38 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
I understnd that Z index is solved, but, it does not work in safari 3.2. and when this option is set to true, the context menu is also disabled in the application. It is hiding the context menu. Ny one hit the same problem?
Left by sai on Mar 17, 2011 4:09 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Hi I feel a bit like Maggie that posted on the 3/5/2011
I am not a coder but knows my way around a little bit, I would like to know where I need to do place this coding everyone is talking about to fix their issues. The wmode transparent code.
Here is my files that I have: http://www.imveloart.com/files.png I don't where I need to put this code.
Here is what my problem looks like:http://www.thombesafari.com/index.php?option=com_wrapper&view=wrapper&Itemid=171
The menu drop down goes behind gallery.
PLEASE help will be appreciated ALOT.
Left by Joe on Mar 18, 2011 7:37 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Hi all, I'm really confused by this.
I have an in-page pop up which should be set to appear over a flash object.
Currently in Firefox 3.6 it's just showing a table within the pop-up, but the rest is hidden.
Nothing is showing at all in Chrome, Opera or IE.
I'm using the javascript /SWFObject loader.

The code includes flashheed.js, but I'm struggling a bit to set the wmode=transparent to any effect
Left by Ali Hurworth on Mar 22, 2011 4:59 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Get
wmode to "opaque" not "transparent"

And use z index
Left by Ertosto on Mar 22, 2011 9:53 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Thank you holy mother of satan! This saved my life!
Left by Piccolo on Apr 22, 2011 11:18 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
That solution worked for me!
Is there a similar fix for a javascript slideshow hiding part of a menu?
Ken
Left by kplo on May 20, 2011 1:15 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Thank you for the solutions. Here's the combination that worked for me:

1) I added wmode="transparent" to my object tags (inside the opening tag).
2) I added <param name="wmode" value="transparent" /> beneath <param name="movie" value="yourmovie.swf" />
3)I added style="z-index:-100;" to the div containing my flash content.
Left by Dark Star Rocket Ship on Aug 09, 2011 11:13 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...

I've raised the issue on the official project page here:
http://code.google.com/p/swfobject/issues/detail?id=586
Left by Dark Star Rocket Ship on Aug 09, 2011 11:15 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
adding just the
params.wmode = "transparent"; worked for me

heres the complete code -


<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};
attributes.id = "slideshow";
swfobject.embedSWF("flashSlideShow.swf", "flash", "369", "334", "10.0.0", false, flashvars, params, attributes);
</script>
Left by shailesh on Aug 15, 2011 7:30 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Here is the perfect code


<div>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="966" height="190">

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

<param name="src" value="images/flash.swf" /> <param name="width" value="966" /> <param name="height" value="190" />

<embed type="application/x-shockwave-flash" wmode="transparent" src="/images/flash.swf" width="966" height="190"></embed>

</object> </div>
Left by murali on Aug 22, 2011 5:00 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Has anyone found a work around for iPads. I have this resolved on all browsers apart from ipads?? Youtube video just seems to sit on top despite z-index and wmode being used?

i am..... stumped!
Left by Stuart on Sep 04, 2011 11:58 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Thank you for posting this. It worked like a champ!
Left by Steve on Sep 29, 2011 9:39 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Thank you very much!! I had problem with IE browser and my problem is resolved after setting the wmode property to transparent.

Thanks a lot.

Harish
Left by Harish Rahate on Oct 03, 2011 12:35 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
I noticed that with mode=transparent or mode=opaque the flash was seeing the mouse just not the click. So in the flash file I changed the button action script (ver 2.0) from

on (release) {

to

on (rollOver) {

and wouldn't you know, it works. It's a little quirky since people will click on it anyway and will have to move the mouse off the button to "click" it again. But it's better than having to redesign the whole homepage menu because a client wants a button filled flash banner below the drop down menu.

Naturally, if you don't have the ability to edit the flash file itself then unfortunately this won't help.
Left by kmf on Oct 29, 2011 1:57 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
This thread started in 2007 and continues. Overall that's a good sign. I've read through all of the comments. Most are cookbook advise that sound like, "..this worked for me..". I want to ask and answer this, "how does the browser render markup & execute javascript?". If you can visualize how rendering & javascript engines work then you will most likely be able to understand why problems hare happpening.

Where do I understand browser engines?
Left by John S Wolter on Nov 02, 2011 3:01 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Awesome! This fixed my issue in Google Chrome.
Left by Landman on Dec 15, 2011 4:56 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
wmode transparent is actually bad in most cases, as it taxes the CPU much more than other wmodes, and it is also known to cause all sorts of bugs in Flash Player. wmode opaque will work for z-index purposes, so I suggest avoiding wmode transparent unless you truly need it.

http://slightlymore.co.uk/flash-and-the-z-index-problem-solved/#comment-27
Left by Scott on Dec 16, 2011 8:11 PM

# re: Flash swf object in html: z-index
Requesting Gravatar...
for fire fox :
add "Background"
ex: background:#fff;
Left by Saroz Jung Poddar on Jan 31, 2012 9:40 AM

# re: Flash swf object in html: z-index
Requesting Gravatar...
Hi all,
Does anyone know what html code i need to add to the bellow script,(contact form) for it to appear behind the drop down categories list. ive tried a few things without success, I am a novice at this but hopefully someone can suggest, it shown ok on some firefox browser but not on Ie9 or Google Chrome:

you can view the error page at:
http://www.netprice-mobiles.co.uk/Contact_Us.php

Script:
<script type="text/javascript" src="swfobject.js"></script><div id="CC66334">Form Object</div><script type="text/javascript">var so = new SWFObject("my_name_is.swf", "my_name_is.xml", "507", "322", "7,0,0,0", "#ffffff");so.addParam("classid", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");so.addParam("quality", "high");so.addParam("scale", "noscale");so.addParam("salign", "lt");so.addParam("FlashVars", "xmlfile=my_name_is.xml&w=507&h=322");so.write("CC66334");</script>

*Same happening to Form on "Submit Details page"

Thanks
Stephen
Left by stephen on Mar 14, 2012 3:35 PM

Your comment:
 (will show your gravatar)


Copyright © Steve Clements | Powered by: GeeksWithBlogs.net | Join free