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

Print | posted on Saturday, March 3, 2007 12:21 PM

Feedback

# re: Flash swf object in html: z-index

Left by Sean at 3/5/2007 10:40 PM
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

# re: Flash swf object in html: z-index

Left by reztart at 9/17/2007 11:50 AM
Gravatar try to change "/someMovie.swf" to "someMovie.swf" when works in firefox for me =)

# re: Flash swf object in html: z-index

Left by Paul at 3/26/2008 4:18 PM
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.

# re: Flash swf object in html: z-index

Left by Tony at 5/12/2008 10:42 PM
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.

# re: Flash swf object in html: z-index

Left by Seth at 7/24/2008 7:53 PM
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.

# re: Flash swf object in html: z-index

Left by Warren at 7/29/2008 8:41 PM
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?

# re: Flash swf object in html: z-index

Left by Rocky at 8/22/2008 4:30 PM
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>

# re: Flash swf object in html: z-index

Left by saran at 8/29/2008 9:08 AM
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

# re: Flash swf object in html: z-index

Left by Pygmees at 9/5/2008 6:43 PM
Gravatar Hi, apparently swfobject doesnt work with google chrome...

# re: Flash swf object in html: z-index

Left by MarkStar at 9/12/2008 12:46 AM
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" .....

# re: Flash swf object in html: z-index

Left by Pascal at 9/14/2008 10:10 PM
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.

# re: Flash swf object in html: z-index

Left by Bob Hinrichs at 10/29/2008 9:31 PM
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.

# re: Flash swf object in html: z-index

Left by PRODATA at 12/4/2008 3:31 PM
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>

# re: Flash swf object in html: z-index

Left by canvas wall art at 12/15/2008 2:51 AM
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.

# re: Flash swf object in html: z-index

Left by Caleb F at 12/17/2008 5:32 PM
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.

# re: Flash swf object in html: z-index

Left by Dragos Stancu at 1/16/2009 2:49 PM
Gravatar it works!! thanks guys!

# re: Flash swf object in html: z-index

Left by Jaret at 5/21/2009 2:15 PM
Gravatar This thread was very informative. Thanks to everyone

# re: Flash swf object in html: z-index

Left by digital at 6/17/2009 10:30 AM
Gravatar wmode = "transparent"

that's all you need

# re: Flash swf object in html: z-index

Left by WebG at 6/18/2009 9:21 AM
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?

# re: Flash swf object in html: z-index

Left by motofzr1000 at 7/3/2009 8:05 AM
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 ?

# re: Flash swf object in html: z-index

Left by Toan Nguyen at 7/7/2009 10:42 PM
Gravatar try so.addParam("wmode","opaque");

# re: Flash swf object in html: z-index

Left by Vincent at 7/14/2009 7:37 AM
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

# re: Flash swf object in html: z-index

Left by Bob at 8/3/2009 7:56 PM
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!!



# re: Flash swf object in html: z-index

Left by Prasad at 8/6/2009 2:46 AM
Gravatar Hi there,
I had same problem, flash object covering drop down menu.
Below code worked for me.
<param name="wmode" value="transparent" />
Thanks!!

# re: Flash swf object in html: z-index

Left by sd at 8/7/2009 5:20 PM
Gravatar thank you very mutch

# re: Flash swf object in html: z-index

Left by Moderator at 8/28/2009 10:13 AM
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

# re: Flash swf object in html: z-index

Left by Jonas Lampe Persson at 9/7/2009 4:25 AM
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!

# re: Flash swf object in html: z-index

Left by web designer at 12/6/2009 11:06 PM
Gravatar brilliant! name="wmode" value="transparent" fixed my issue

# re: Flash swf object in html: z-index

Left by Keith at 1/3/2010 8:25 PM
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!

# re: Flash swf object in html: z-index

Left by Baraholka at 1/13/2010 11:39 AM
Gravatar Legend !

Solved my z-index and cross-browser problem!

# re: Flash swf object in html: z-index

Left by lds at 1/29/2010 8:15 AM
Gravatar Legend, was driving me nuts...

# re: Flash swf object in html: z-index

Left by Mairum at 3/4/2010 9:23 AM
Gravatar Yes! params.wmode = "transparent"; works great for the dynamicaly embeded swf using swfObject.

Thanks guys

# wmode

Left by brainox at 3/5/2010 9:10 PM
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.

# re: Flash swf object in html: z-index

Left by budget at 3/14/2010 5:08 PM
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.

# re: Flash swf object in html: z-index

Left by Sinan at 4/23/2010 5:05 AM
Gravatar Thank you, you've solve my problem Really...

# re: Flash swf object in html: z-index

Left by EvNix at 7/2/2010 6:16 PM
Gravatar use wmode=transparent for both embed and object, it worked on my midori and firefox browser

# re: Flash swf object in html: z-index

Left by Joel Hackney at 7/6/2010 2:29 PM
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!?

# re: Flash swf object in html: z-index

Left by Alex R at 7/22/2010 3:45 AM
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.

# re: Flash swf object in html: z-index

Left by Canvas Paintings at 8/3/2010 4:41 PM
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?

# re: Flash swf object in html: z-index

Left by jonnycodes at 8/16/2010 1:04 AM
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.

# re: Flash swf object in html: z-index

Left by Suresh at 9/10/2010 7:15 PM
Gravatar Hi Steve,
Thanks for the post which solved a week long googling..
you made my day.. thanks

# re: Flash swf object in html: z-index

Left by Don V at 12/21/2010 8:57 AM
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>

# re: Flash swf object in html: z-index

Left by megesh at 1/26/2011 8:07 PM
Gravatar thanks for the help! best post on the subject by far!

# re: Flash swf object in html: z-index

Left by maggie at 3/5/2011 4:02 AM
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)

# re: Flash swf object in html: z-index

Left by seltar at 3/9/2011 3:38 AM
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.

# re: Flash swf object in html: z-index

Left by sai at 3/17/2011 4:09 AM
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?

# re: Flash swf object in html: z-index

Left by Joe at 3/18/2011 7:37 PM
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.

# re: Flash swf object in html: z-index

Left by Ali Hurworth at 3/22/2011 4:59 AM
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

# re: Flash swf object in html: z-index

Left by Ertosto at 3/22/2011 9:53 AM
Gravatar Get
wmode to "opaque" not "transparent"

And use z index

# re: Flash swf object in html: z-index

Left by Piccolo at 4/22/2011 11:18 AM
Gravatar Thank you holy mother of satan! This saved my life!

# re: Flash swf object in html: z-index

Left by kplo at 5/20/2011 1:15 PM
Gravatar That solution worked for me!
Is there a similar fix for a javascript slideshow hiding part of a menu?
Ken

# re: Flash swf object in html: z-index

Left by Dark Star Rocket Ship at 8/9/2011 11:13 PM
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.

# re: Flash swf object in html: z-index

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

# re: Flash swf object in html: z-index

Left by shailesh at 8/15/2011 7:30 PM
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>

# re: Flash swf object in html: z-index

Left by murali at 8/22/2011 5:00 PM
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>

# re: Flash swf object in html: z-index

Left by Stuart at 9/4/2011 11:58 PM
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!

# re: Flash swf object in html: z-index

Left by Steve at 9/29/2011 9:39 AM
Gravatar Thank you for posting this. It worked like a champ!

# re: Flash swf object in html: z-index

Left by Harish Rahate at 10/3/2011 12:35 AM
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

# re: Flash swf object in html: z-index

Left by kmf at 10/29/2011 1:57 PM
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.

# re: Flash swf object in html: z-index

Left by John S Wolter at 11/2/2011 3:01 AM
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?

# re: Flash swf object in html: z-index

Left by Landman at 12/15/2011 4:56 PM
Gravatar Awesome! This fixed my issue in Google Chrome.

# re: Flash swf object in html: z-index

Left by Scott at 12/16/2011 8:11 PM
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

# re: Flash swf object in html: z-index

Left by Saroz Jung Poddar at 1/31/2012 9:40 AM
Gravatar for fire fox :
add "Background"
ex: background:#fff;

# re: Flash swf object in html: z-index

Left by stephen at 3/14/2012 3:35 PM
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

Your comment:





 
 

Copyright © Steve Clements

Design by Bartosz Brzezinski

Design by Phil Haack Based On A Design By Bartosz Brzezinski