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.

  1. Luanigio says:

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

    Ciao.

  2. Shirley says:

    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.

  3. Shirley says:

    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.

  4. Shirley says:

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

  5. Ryan says:

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

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

  7. mindless says:

    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.

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

  9. Jimmy says:

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

    Thank you again Great JOB!

  10. Jim says:

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

  11. phani says:

    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

  12. Ryan says:

    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!

  13. mani says:

    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

  14. Dont wokr says:

    Doesnt work in Firefox 3.5 or IE8

  15. Allan says:

    thanks for this tip, work like a charm :)

  16. kazal says:

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

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

  18. Chris says:

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

  19. Laura says:

    Seems to be hiding in Safari 5. Yarg.

  20. Chris Jones says:

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

  21. Chris Jones says:

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

  22. wayne says:

    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:

  23. wayne says:

    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.

  24. Dean says:

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

    Have a nice day, missing you alright already!

  25. paul says:

    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.

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

  27. Vimal says:

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

  28. Madhur says:

    Thanks a ton. this works perfectly… !!!

  29. Lester says:

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

  30. Garth says:

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

  31. Jon says:

    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!

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

  33. Steve says:

    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.

  34. bernie says:

    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?

  35. elistae says:

    wmode=”transparent” fixed it
    thanks!

  36. Paige says:

    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!

  37. maurizio says:

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

  38. Ravi T. says:

    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.

  39. Ken says:

    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

  40. Geraldine says:

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

  41. Geraldine says:

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

    • xy says:

      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.

  42. Meagan Byer says:

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

    • basha says:

      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.

  43. Anand says:

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

  44. sabeel says:

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

  45. Anna says:

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

  46. Virender says:

    Thanks A lot for fixing the problem. Thankyou vermuch Scott

  47. Virender says:

    Thanks A lot for fixing the problem. Thankyou vermuch Scott

  48. Vijay says:

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

  49. Martin van den Ban says:

    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.

  50. Martin van den Ban says:

    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.

  51. Paritosh says:

    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

  52. pankaj says:

    thanks to help

  53. Pranali says:

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

  54. Omesh Grover says:

    thank you for ur solution.

Trackbacks/Pingbacks »

  1. WordCast 41: Cats in boxes- best blog theme ever - Dave Moyer says:
  2. WordCast 41: Cats in boxes- best blog theme ever | WordCast says:
  3. Weekly Tip: Adding Dropdown Menus says:

Tweetbacks »

  1. erdaest (Erda Estremera) says:

Leave a Reply