This guest post was written by V Scott Ellis of Blackbox Technologies, a business that helps companies to maximize their web presence. If you have WordPress knowledge and are interested in writing a post for WordPress Hacks, please contact us.
One of the more common issues with embedding a flash object on your home page (or any page for that matter) is that if it is near the navigation and you have CSS drop-down menus, then you may find your drop-down menu getting lost behind the flash object. If you haven’t dealt with this before it can feel like a nightmare, but fortunately it’s a pretty easy fix.
The Problem: You have a CSS based drop-down menu in your navigation and a flash element near it the menus may get “hidden” behind the flash object.
The Solution: Set the z-index of the div holding the flash to 1 and the z-index of the div holding the nav to 2.
In the flash element:
Look for the flash <object> tag and add the following code:
<param name="wmode" value="transparent">
You’ll want to insert this code right below the <param name=”quality” value=”high”> tag and include the code wmode=”transparent” in the flash <embed> tag .
V Scott Ellis
Scott Ellis is a consultant and entrepreneur with a passion for building businesses and improving the way they operate. With several efforts of his own currently underway Scott has set out to help those interested in starting their own businesses to succeed by overcoming the obstacles and unknowns, and applying "big business" principles learned from years of consulting, to small and start-up businesses. In a world where business is ever shifting, it is Scott's goal to help enable anyone who wishes to take their fate into their own hands to be successful. Scott is a Partner at BlackBox Technologies, a leading provider of web solutions from website design and development to business process automation for companies of all size.
awesome tips thanks so much for the great post. 
Great list and very thorough!
When was the last time this list was updated? Are they all still relevant today seeing ...
Hey,
You can also use the below plugin which adds a tick box when creating the page asking if you want ...
Great post. I wish more people thought about this kind of thing.
I agree that it does feel a bit ...
i Agree with Hillary Bost 
awesome article. Thanks for sharing with us. 
Great!
I go immediately to try these tips.
Thank you and happy new year.
Ciao.
Hmmm. I don’t think that this solution is cross-browser compatible. I played around with a similar thing this past fall and had a problem with ‘Safari 2′. Surprisingly, it worked on every single browser (including IE flavors) as well as Safari 3, but not Safari 2.
Yeh, here’s my article that I published on the subject back in September…
http://www.velvetblues.com/web-development-blog/safari-and-flash-dont-play-well-together/
I couldn’t find a solution.
No follow up? (Sorry for the persistence.
)
@Shirley I wasn’t aware that Safari 2 couldn’t handle the overlays. I don’t think it’s a huge issue though as Safari 2 is such a rarity these days.
Thanks for the useful menu article. I am searching for the same solutions. Thanks anyway.
Is it just me and my bad luck? Ive found this solution in other places and it doesnt work for me… plus now my nav bar is all screwed up in IE. has anyone else had this not work? is there another solution somewhere? Its driving me crazy.
Shouldn’t z-indexed elements have to be absolutely, fixed or relatively positioned and into the same parent in order to them elements interact with each other?
If your elements are under different parents, the parents will determine the z-index that will determine the stacking.
Thank you so much!, super straight forward and perfectly helpful for my situation.
Thank you again Great JOB!
Thanks so much!! this is exactly what i needed and fixed my problem perfectly!!
hello sir,
i have already done all the things that were mentioned here..but still the flash is hiding my navbar in safari 4 browser only,…its working fine in ie8, ie7, mozilla 3.5 latest,,,and chrome,.,but am not able to find any solution for safari 4…
really appreciate ur help
thank u
I’ve tried this and it doesn’t work for me in IE8 or Firefox 3.5 – it works ok in IE7, not sure why!
i am having the same problem that my drop down menus are hiding the featured content slider…but i am unable to understand the solution given above …coz i am really a starter in wp …can any body plz explain a bit for me ….plzz
Doesnt work in Firefox 3.5 or IE8
Thanks, I found your article after searching through several others-it worked.
thanks for this tip, work like a charm
In safari browser it dose not work. Its amazing. Can any one help !!!!!!!!!!!!
Hi guys I tried it out but was having same issue but still couldn’t fix it. Then thought of making the wmode to opaque and it worked out.Its working fully on my website!!
Anyways thanks for the post!!
thankyou so much for this fix. was doing my head in and this worked a treat
Seems to be hiding in Safari 5. Yarg.
http://www.thesalesdrivers.com/beta/index.php
followed the instructions and does not work on IE7 or IE8
never mind, found the answer here and it works.
http://www.projectseven.com/support/answers.asp?id=127
This link worked a treat with my problem, I’ve got a Youtube video that was causing problems on my WordPress site. Cheers Chris
The post above from Chris uses the similar code but makes the flash movie opaque, this still left the flash movie overlaying the css. I found that all I needed to do was ajust the flash code and didn’t need to worry about altering the z-index values of any css script.
I added within the tag, and I also added wmode=”transparent” into the embed code, the final code looked something like:
I entered elements of code in my post above which don’t seem to have appeared, if they appear at a later date afer moderation I apologise, basically follow Chris Jones’s link above but where the code tells you to enter “opaque” both in the param and embed code, you will need to enter “transparent” instead of “opaque” and this should work.
AWESOME! Thank you… after frikkin years this simple guide did it! AWESOME I SAY AWESOME!
Have a nice day, missing you alright already!
Thank you! This works great. I kept trying to solve it with just the z-index, but didn’t know it needed those additions to the embed code. Thanks.
Thanks for the useful menu article. I am searching for the same solutions. Thanks anyway…
Thank you very much. It is working.. Very straight forward method.
Thanks a ton. this works perfectly… !!!
it work but when i play flash games key up and down make scroll page in ie8.
Thnx wayne !!!! the wmode=”transparent” works in my case
Anyone having these same issues with embedded mp4′s? Only IE is giving issues, 8 is the only version I really need it to work in. When I set the wmode to transparent, my drop down with show up on top of the mp4 correctly. However, the quicktime controls on the bottom of the video will not show up. If I change the wmode to opaque, the controls show up, but the video is back on top of my dropdown menu. Any help would be awesome, Thanks!
Thanks for this – I was able to save the day with a client by using your information to fix this very problem on a site!
Scott,
Thank you for this extremely valuable code snippet. Implemented on our BMW website and solves the issue of menus popping up behind the flash video.
I’m having a similar problem but only with ie8. My dropdown hides behind my video player. I’ve added z-index of 10000 to my css dropdown and I’ve included
param name=”wmode” value=”transparent”
inside my and still with no luck. Also tried including a z-index=1 inside my iframe but nothing happens. Still same problem
Can anyone help. I’m still kind of new at css and don’t know what else I can do. IE gives me more headaches than its worth. Anyone?