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.

Scott Ellis is the founder of VSELLIS.com and is a web producer for GeekBeat.tv.

  • Luanigio

    Great!
    I go immediately to try these tips.
    Thank you and happy new year.

    Ciao.

  • http://www.velvetblues.com Shirley

    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.

  • http://www.velvetblues.com Shirley

    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.

  • Pingback: WordCast 41: Cats in boxes- best blog theme ever - Dave Moyer

  • http://www.velvetblues.com Shirley

    No follow up? (Sorry for the persistence. :-))

  • http://pixopoint.com/ Ryan

    @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.

  • http://www.sudeep.net.np Sudeep Tamakar

    Thanks for the useful menu article. I am searching for the same solutions. Thanks anyway.

  • mindless

    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.

  • http://seosumo.com sergio zambrano

    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.

  • http://www.pupr.edu Jimmy

    Thank you so much!, super straight forward and perfectly helpful for my situation.

    Thank you again Great JOB!

  • Pingback: WordCast 41: Cats in boxes- best blog theme ever | WordCast

  • http://www.mex.com.au Jim

    Thanks so much!! this is exactly what i needed and fixed my problem perfectly!!

  • phani

    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

  • http://www.love-rugs.com Ryan

    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!

  • mani

    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

  • Dont wokr

    Doesnt work in Firefox 3.5 or IE8

    • http://riparchery.com monica

      Thanks, I found your article after searching through several others-it worked.

  • Allan

    thanks for this tip, work like a charm :)

  • Pingback: Weekly Tip: Adding Dropdown Menus

  • kazal

    In safari browser it dose not work. Its amazing. Can any one help !!!!!!!!!!!!

  • http://www.bseindia.com Preet Webmaster

    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!!

  • http://dubstepdownloads.com Chris

    thankyou so much for this fix. was doing my head in and this worked a treat :)

  • http://www.ourston.com Laura

    Seems to be hiding in Safari 5. Yarg.

  • Chris Jones

    http://www.thesalesdrivers.com/beta/index.php
    followed the instructions and does not work on IE7 or IE8

  • Chris Jones

    never mind, found the answer here and it works.
    http://www.projectseven.com/support/answers.asp?id=127

    • http://www.sixteeneighteen.co.uk Lyndsey

      This link worked a treat with my problem, I’ve got a Youtube video that was causing problems on my WordPress site. Cheers Chris

  • wayne

    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:

  • wayne

    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.

  • Dean

    AWESOME! Thank you… after frikkin years this simple guide did it! AWESOME I SAY AWESOME!

    Have a nice day, missing you alright already!

  • paul

    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.

  • http://www.tatilyerlerim.biz Tatil Yerleri

    Thanks for the useful menu article. I am searching for the same solutions. Thanks anyway…

  • http://www.spiritchi.com Vimal

    Thank you very much. It is working.. Very straight forward method.

  • http://cruxfinder.com Madhur

    Thanks a ton. this works perfectly… !!!

  • http://www.daigioca.com/ Lester

    it work but when i play flash games key up and down make scroll page in ie8.

  • Garth

    Thnx wayne !!!! the wmode=”transparent” works in my case

  • Jon

    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!

  • http://www.yourwpdiva.com urwordpressdiva

    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!

  • http://www.unitedbmwonline.com Steve

    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.

  • bernie

    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?

  • http://www.asrd.info elistae

    wmode=”transparent” fixed it
    thanks!

  • Paige

    Thank you, thank you, thank you! Your solution is so simple and straightforward, and worked perfectly! I checked it across Firefox, Chrome, Safari, and IE browsers and it worked. Thank you so much!

  • maurizio

    It works for flash files, NOT for PDF files. CSS dropmenu will be always be hidden by PSD plug-in.

    • Linda

      Hello maurizio,
      I face the sampe problem with the pdf files. Have you found a solution for that ?

  • http://horse-head-mask.com Ravi T.

    Wish I would have found this a month ago. I abandoned my whole site design because this stupid problem and switched to a WordPress blog. I’ll save this one for next time. Thanks.

  • http://www.karaza.com Ken

    Had this problem with one of my sites and decided to search see if I could find a solution online, and found it here. I thought I would have to move my videos down on the page. This worked perfect. Thanks

  • Geraldine

    Thank you!!!!!!!!!!!!!!!!

  • Geraldine

    Doesn’t seem to work in safari… oh well. let me know if anyone has a fix for safari…

    • xy

      So it works with safari: embed wmode=”transparent” src=”video.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash”

      Important is the wmode=”transparent” option in the embed tag.

  • http://thefrenchgourmet.net Meagan Byer

    In what part of wordpress would you edit this code? Thank you!!

    • basha

      ya changing the z-index is fine but, the thing is I have embedded an iframe inside the html page. so when ever i click on the videos, the video is playing inside the frame and mean time if I try to navigate to other video which is in drop down list its hiding behind that video.please help me in this.

  • Anand

    Thanks for the post, i could solve it..great help and article indeed!!

  • http://findspage.com sabeel

    Thanks very very much, I was in a big problem with this, thank you once again for this information.

  • Anna

    this was fantastic advice! Thank you, fixed my problem so easily.

  • Virender

    Thanks A lot for fixing the problem. Thankyou vermuch Scott

  • Virender

    Thanks A lot for fixing the problem. Thankyou vermuch Scott

  • Vijay

    This is not working with WMV file. Please help in this case.
    Thanks in advance.

  • Martin van den Ban

    Hi,

    I have Video Light box and can’t find “<object>” anywhere in the normal pages but can find a referral to “swfobject.js”. Within that file I’m not sure how (or if) I need to adjust it so that I get what I’d like to get.

    As I’m new to this forum I don’t know how to add the code here but you can find it at: https://www.vdban.nl/php_site/video_videolb/swfobject.js
    If anyone could help me out it would be much appreciated.

  • Martin van den Ban

    Hi,

    I have Video Light box and can’t find “” anywhere in the normal pages but can find a referral to “swfobject.js”. Within that file I’m not sure how (or if) I need to adjust is so that I get what I’d like to get.

    As I’m new to this forum I don’t know how to add the code here but you can find it at: https://www.vdban.nl/php_site/video_videolb/swfobject.js
    If anyone could help me out it would be much appreciated.

  • Paritosh

    I want to show a previous and next div over flash content which is opening in iframe.I have tried all the wmode=opaque or wmode=transparent or wmode=window, but fail to work in IE8.
    I cant add because flash content is coming from other site.I am loading the other site in iframe.
    Please help me ASAP.
    Thanks
    Paritosh

  • pankaj

    thanks to help

  • Pranali

    Thanks alot….. It solved my problem in 2mins where i was stuck with this issue from a long time. Thanks alot again.

  • Omesh Grover

    thank you for ur solution.