Flash Object And Z-Index: How To Make Them Play Nicely Together
I’m currently working on a site with the wonderful Hong Vo from Namaste Interactive that has an embedded flash video object on the home page. This site also has a horizontal drop-down menu. All was great until one of the drop down lists became long enough to overlap the flash video. Apparently, when embedding a flash video into an html page the embed code automatically puts the flash video on top of everything else. I could not for the life of me get the menu to lay behind the video no matter what I tried.
It was one of those “little problems” that was eating away my entire morning and most of my patience! ;o) In sadness, I discovered several forum discussions in which, apparently, it was agreed that there was simply nothing to be done.
Thankfully, I was stubborn and continued to dig further (I don’t give up easily!) and found this discussion, which contained a simple solution, which I will summarize for you:
- Wrap your flash content in a div
- Add <param name=”wmode” value=”transparent”> to your object tag
- Set wmode=”transparent” in the embed tag
- Use css to set the position and z-index for your div (don’t set negative z-index values as it will make your flash disappear)
:c:
#flash {
position: relative; /*or absolute*/
z-index: 0;
}
:x:
<div id="flash">
<object .… >
<param name="wmode" value="transparent">
<embed .… wmode="transparent">
</object>
</div>
And that’s it!
April 8th, 2006 at 7:04 am
Whoa - great timing!
I was just struggling with the same thing, and came accross probably some of those same articles saying there was nothing to be done and then I find this.
Thank you!!
April 8th, 2006 at 11:52 am
Mani,
One snag I see in this is that the menu’s don’t get hidden if you do a mouseover straight onto the flash object after a menu link mouseover.
You could get a script to communicate to the javascript added to the flash object to help hide these menus on mouseover.
Let me know if you need any further help on this.
Cheers,
Jai
April 11th, 2006 at 11:34 am
Jai: I’m not sure what you mean. I don’t see this in Firefox or IE on the PC. What browser/platform are you seeing this on?
Thanks!!
April 15th, 2006 at 11:19 am
Check this out Mani:
http://www.dzinedev.com/ytc_menu.jpg
I’m viewing it on IE 6+, Win2k.
Jai
April 17th, 2006 at 8:56 am
Jai:
I don’t have win2k to test on so, yes please … I’d love help on this! No one else has reported this, but clearly the screen shot doesn’t lie. ;o) Anyone else seen this?
Thanks!
April 17th, 2006 at 3:07 pm
Mani,
False alarm raised by me. Sorry :-)
The problem is actually showing up on Firefox 0.9.3, not on IE. Assuming that you are looking to support FF1+ and above only.
Else I’ll send in a script that you could include in your flash mov to hide them menus on mouseover.
Cheers,
Jai
April 17th, 2006 at 10:18 pm
Just now tested it on Firefox v.1.07, on XP. Same probs.
Jai
April 19th, 2006 at 9:42 am
Jai: Do you have any idea what would cause this in ff 1.0x? If you have a script that will take care of it I’d love to get my hands on it. ;o)
Thanks!!
April 20th, 2006 at 3:55 am
Mani,
Script is in the mail :-). Do check and let me know if you face any probs with it.
Jai
April 21st, 2006 at 9:38 am
Mani!
I’m a student at UALR. My major is technical writing, but my minor is digital graphics because I love design, especialy webdesign.
I found your website about a week ago, and I love it! Love the articles, and I like seeing how you work through problems, etc. Thanks for sharing and PLEASE keep writing! A blog like this is hard to come by.
Rachel
April 22nd, 2006 at 9:35 am
Off topic I know but have you see the agility of Duncan Wong? amazing!
April 25th, 2006 at 12:39 pm
Sian: Oh my God, I know! Isn’t he just incredible!
Everyone Else: If you haven’t looked at the Wedgie Video then you are really missing out!
May 18th, 2006 at 8:00 am
This is a problem I’ve had in the back of my mind for a while and I just wanted to stop by and thank you for pointing me in the right direction.
Thanks!
June 21st, 2006 at 11:44 am
I also wanted to thank you for this post. I had this exact issue with a flash application I am building and it saved me! Many, many thanks!
July 10th, 2006 at 9:22 am
One more “Atta Boy!” for your collection! Google, and this method, saved me tons of redesign time!! Mucho gracias!!
July 19th, 2006 at 10:12 am
I hate to say it but it ALMOST worked. The site i am working on was working fine untill we added the super crazy flash movie and now the “glideDiv” is going behind the flash movie STILL and my dropdown menus under Products and News and Media is actin all crazy. BOY what a site. Ill be glad to be done with this one. BTW its fine on Firefox Mac, but on IE pc there are issues still. maybe cus its windoze 98 who knows. please advise if you have the time. here is the link to the dev location… http://www.enoxmedia.com/ff/index.php
July 19th, 2006 at 12:50 pm
well thats crazy. I took out the NEW Active Content javascript and it works fine in IE PC now. Goodnezz. I need a beer. ; ) thanks a lot for the hard work and research!
August 8th, 2006 at 9:53 pm
Thankyou Thankyou - you just saved me a few hours (or even weeks) in hair tearing frustration trying to figure that one out! I’m a relative newbie so would NEVER have figured that one out on my own!!!
I’ve just found your site and look forward to reading everyone on it now!
December 4th, 2006 at 4:07 pm
Thank you. I’m glad to know that this issue is resolved. I remember three years ago trying to figure out the problem and devise a solution — I had chalked it up to “browser issues” and decided it couldn’t be solved.
Thanks.
January 3rd, 2007 at 9:31 am
Nice one!
This has saved me from the issue that has been tormenting me for the last few hours: “Why oh why does my Flash movie disappear when I set the wmode to transparent?” - until you pointed out that for some bizarre reason a negative z-index will put the Flash movie behind the background of its container… how did they come to that interpretation of the spec?
Thanks again!
January 17th, 2007 at 1:28 pm
I am so greatful that you found a resolution and posted it. I have been pulling my hair out all morning trying to get these menus to work. Little did I know it was Flash that was causing my headaches. http://www.ridescat.com
(Site will be live after Feb ‘07)
BTW - I love your site…It’s gorgeous!
February 11th, 2007 at 11:51 am
Holy crap if I could hug you right now I would!! This has been driving my nuts all morning long and if it weren’t for this simple little fix I’d be bald by now from tearing my hair out. God bless all of you flash geniuses out there!
February 11th, 2007 at 11:52 am
Ok… just a little addition to my last message… it hasn’t been “driving my nuts” as that would just be creepy. I think you all get the picture. THANK YOU!!!
February 12th, 2007 at 1:52 pm
Thanks!!!! This was such a great help!
February 12th, 2007 at 2:37 pm
Just when I thought I had fixed it… does this work in IE for you? I’m running IE7 and not having much luck with it.
February 13th, 2007 at 1:26 pm
Thank you so much your tip its helped us lot.
February 13th, 2007 at 6:10 pm
[...] http://manisheriar.com/blog/flash_objects_and_z_index [...]
February 22nd, 2007 at 3:16 pm
Thanx very much for your efforts. This is exactly what I was looking for! Great work, thanx!!
February 25th, 2007 at 7:38 pm
I have yet to figure out how to get around a different problem related to this. Yes it works for DHTML menus… but for fixed divs (css frames) you get a weird re-draw problem when you scroll. For example I have a site that has the top navigation always visible where ever the user has scrolled to. about halfway through the page there is a flash movie. When scrolling PAST the flash movie there is a flickering effect over the fixed menu. The same thing happens with quicktime BTW.. I’ve read that this is a re-draw (bug?) problem. Each browser plugin is technically being “Drawn” above all the content in the page. When you scroll the plugin content moves with the page… If anyone ever figures out how to get around this please post it here!
April 10th, 2007 at 2:08 pm
Working on http://www.olson.bz and thought this was the solution allowing a dropdown over the Flash that is scrawled across the entire screen. It works in FF but not in IE. Has anyone got a solution please?
May 5th, 2007 at 4:20 pm
Thank-you! I have been trying to work out how to deal with this now for a day or so. Your solution works :)
June 12th, 2007 at 6:17 pm
Thanks so much for this info, it helped me out greatly!!!
June 19th, 2007 at 10:14 am
Thanks for this. Saved me a lot of time.
September 5th, 2007 at 12:29 pm
one and olny true solution that fixed non working overlaping menu over flash. thank you
September 9th, 2007 at 8:15 pm
FYI: This doesn’t work in linux- firefox.
October 13th, 2007 at 6:27 pm
Hey, thanks for the great article. It worked like a charm. I’m using firefox 2 and IE7. Thanks again!
October 16th, 2007 at 12:26 am
Thank you very much. I was struggling with this problem. Thanks a Lot again.
November 5th, 2007 at 5:22 am
You, but today was a flickering couple homme et femme qui aiment sexe image swept through.
November 20th, 2007 at 6:42 am
My problem is that the flash object is out of my control (3rd party ads)
how would i be able to implement this?
December 7th, 2007 at 12:41 am
So it looks like there is no solution so far to using this with IE7. That is to say that no one has come back with a solution for it yet.
December 10th, 2007 at 9:07 pm
Here’s another thanks - drove me crazy for a while… I refuse to use IE7, so I don’t know if it does works there, but I’m happy for now! Thanks for the effort.
December 21st, 2007 at 12:14 am
Thank you very much!! It’s really helpful!!
January 12th, 2008 at 3:08 pm
Very Helpful! Thanks. A note though if you are using a background color in the flash element that can disappear be sure to set the div to mimic the background color used in the creation of the flash file for instance if the flash was created with a blue background set the div#flash {background-color:blue;}
February 5th, 2008 at 8:44 am
Very good! Thanks!
February 13th, 2008 at 8:07 am
This is exactly what I needed. Worked immediately for my CSS menu overlap problem. Thanks much!
February 14th, 2008 at 12:30 am
Hey…
I was struggling with this one.. Thanks a lot..
February 20th, 2008 at 8:01 am
Thanks for this! I just ran into this same problem and this worked great in solving it.
April 10th, 2008 at 2:25 am
Thanks a lot, that really helps.
April 14th, 2008 at 8:29 am
Hi this works great for mozilla and IE on a pc. On the Mac, I cannot get it to work.
The menus keep flashing. I have menus above the flash which drop down on the flash.
On the pc it works great, on the mac it doesn’t.
Any suggestions?
April 22nd, 2008 at 6:38 pm
After 2 years, still a very handy post! Ta.
May 3rd, 2008 at 10:51 am
Thank you!
May 6th, 2008 at 12:05 am
thanks a lot, it has carved me from a big tension.
June 6th, 2008 at 10:03 am
I’ve added you to my x-mas card list. Thanks.
June 10th, 2008 at 7:27 am
I have been working around this issue for two years at least. Didn’t think there was a solution. Thank you!!!
June 19th, 2008 at 2:35 am
Thanks for the solution :)
June 20th, 2008 at 8:22 am
You ROCK dude, saved me days of agony!!!