voodish logo
tweet rss book of faces Linked In

Lightbox / Thickbox / Menu disappears behind Flash / YouTube video [fixed]

youtube logo

How to fix Lightbox / Menu items which disappear behind Flash / You Tube video -

Usually found with a lightbox and a youtube video on the same page, although can be a menu / lightbox problem combination too - the lightbox will slide behind the Youtube / Flash video; using Z-Index will NOT fix the problem.

NEW FIX - What you need to do

When you’ve grabbed your embed code from your YouTube video page, add the following ?wmode=transparent straight after your src=”http://……., see the example below:

Example:

src="http://www.youtube.com/embed/MRjlNSUyhuw?wmode=transparent&rel=0"

 

 

New fix not working for you? Try the old legacy fix below:

OLD FIX

If your using the legacy markup for YouTube video then with a few clever additions to your Object and Embed tags we can fix this problem and Send You Tube video to the back.

You tube video / menu appears on top, everything else behind

Most annoying when your using a menu or a lightbox and it becomes hidden because of the video, thankfully there is an easy fix.

  • Straight after the Object tag of your video code, place the following snippet:
    <param name="WMode" value="transparent"></param>
  • Just before the type=”application/x-shockwave-flash” place the following code:
    wmode="transparent"

Example Code Before:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="344" codebase="http://download.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/videourl" /><embed type="application/x-shockwave-flash" width="550" height="344" src="http://www.youtube.com/videourl" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Example Code After:

<object classid="clsid:d27cdb6e-ae6d- 11cf-96b8-444553540000" width="550" height="344" codebase="http://download.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="WMode" value="transparent"></param><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/videourl" /><embed wmode="transparent" type="application/x-shockwave-flash" width="550" height="344" src="http://www.youtube.com/videourl" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Example of it working:
www.bodyandfaceoptions.co.uk/treatments/hialurox-antiaging-hyaluronic-laser-system/
Select a Gallery photo from the right sidebar opposite the YouTube video and see how it overlaps the video rather than tucking behind it :D

This is tried and tested on Firefox 2/3, IE 6/7/8, Chrome, Opera 9x on Windows and Linux

Let us know how you got on with a comment below »

Related Articles

Comments RSS Feed

2 Trackbacks/Pingbacks

  1. Pingback: jqzoom over menu in Magento, Voodish Articles. on August 2, 2010
  2. Pingback: Lightbox – Simon Fricker | Convergent Media CMP 2012 on March 12, 2012

74 Comments

  1. Chris August 24, 2009

    Helped a lot cheers!!

  2. Go to Top of the page

  3. Rocky August 27, 2009

    Great tip and exactly the method I used to get an accordian menu, Flash file and Lightbox to work with on a customers website.

  4. Go to Top of the page

  5. admin August 28, 2009

    No probs Guys, I’m glad it could be of some help; it was annoying me for a while.

    I was avoiding You Tube video and Lightboxes; no need anymore, all good :)

  6. Go to Top of the page

  7. Oncle September 8, 2009

    Good job, but for me, doesn’t work in FF

  8. Go to Top of the page

  9. admin September 8, 2009

    @Oncle, really!?
    Could you tell us what version of Firefox you are using?
    Does the example page work for you:
    http://tinyurl.com/lqpnfp

  10. Go to Top of the page

  11. admin September 9, 2009

    Should be ok now Oncle, it was a slight bug with the old version of Firefox you were using and the Gallery software.

  12. Go to Top of the page

  13. suepafly September 11, 2009

    thanx!

  14. Go to Top of the page

  15. Mindbreed September 18, 2009

    Thank you for the hint! Solved my problem, great work!

  16. Go to Top of the page

  17. Drakoo September 28, 2009

    Great !! You saved my life !! Thanks !!

  18. Go to Top of the page

  19. Roy October 2, 2009

    thanks a lot for that, it worked a treat. I’ll have to bookmark this page for future reference!

  20. Go to Top of the page

  21. Dennis October 9, 2009

    Thanks - huge help on our drupal website!

  22. Go to Top of the page

  23. siddharth October 14, 2009

    great help for me. cheers!!

  24. Go to Top of the page

  25. Clayton January 5, 2010

    Sweet. Exactly what I was looking for. You can see an example here if it helps anyone (www.adelaidepersonaltrainers.com.au/about).
    Click on the link on the last line of text [Watch our quick YouTube Channel video for a simple explanation of our service.] to see it now hidden behind.

    Thank you so much for the fix.

  26. Go to Top of the page

  27. John Peden January 19, 2010

    Absolute livesaver. Nice one!

  28. Go to Top of the page

  29. Mark Dekker February 10, 2010

    On my website, it slows down the flash animation to almost a halt. This only happens in IE8.
    In FF3.6 this technique works great

  30. Go to Top of the page

  31. admin February 10, 2010

    @Mark Dekker: Yes, I think it’s an IE bug with the way it handles Flash/Video within a lightbox.

    Strangely, I’ve only ever seen this in IE6 with an older PC, where the CPU gets maxed out after a few attempts at opening the lightbox.

    Perhaps IE8 is using some sort of legacy code for handling this - does the same happen in IE7 for you? If not, try using a IE8 Quick fix:

    http://www.voodish.co.uk/articles/ie8-quick-fix/

    Worth a shot, hope it helps.

  32. Go to Top of the page

  33. Kamini March 16, 2010

    Thank you so much. I’d almost given up on this problem.

  34. Go to Top of the page

  35. Chris April 6, 2010

    Its taken me nearly 16 hours to find this fix.
    thank you it works like a dream in Joomla 1.5

  36. Go to Top of the page

  37. Alao April 12, 2010

    Been looking for this fix for over 2 years. The embed part is what really fixes the issue!!! Thanks man!!!!

  38. Go to Top of the page

  39. JUNEINK April 26, 2010

    well thank you sir! your a life saver :)

  40. Go to Top of the page

  41. Mattplaybass May 3, 2010

    You’re my hero. Thanks

  42. Go to Top of the page

  43. David H August 8, 2010

    Thankyou soo much for this! You’re a saint

  44. Go to Top of the page

  45. Dang August 19, 2010

    Thank you a million times over. A headache solved.

  46. Go to Top of the page

  47. tom August 31, 2010

    I’ve tried soooo many things and this worked instantly, thanks!!!!!

  48. Go to Top of the page

  49. Kobe September 21, 2010

    Thank you so much!
    This helped me put my youtube video right under my image gallery!!

    Exactly what I was looking for!

  50. Go to Top of the page

  51. justin September 23, 2010

    Many thanks that work just as I wanted it to. Unfortunately now the toolbar and screen cannot be accessed. If that makes sense. Can any one help?

  52. Go to Top of the page

  53. admin September 23, 2010

    Hi Justin, Please send a link to your website, so that we can see the problem, thanks Voodish.

  54. Go to Top of the page

  55. justin September 23, 2010

    Thank you, it has not gone live as I am just starting to develop it. Will let you guys know as soon a it does. Thanks for getting back so quickly. You guys are great;)

  56. Go to Top of the page

  57. admin September 23, 2010

    No probs, hopefully we can get it working as it should :)

  58. Go to Top of the page

  59. david November 4, 2010

    helped a lot boss! you are the boss!

  60. Go to Top of the page

  61. alejo720 December 2, 2010

    Thank you very much. This is a very good post!!! It helped me a lot!!!

  62. Go to Top of the page

  63. Leonel Rocha December 10, 2010

    What about iframe embeded vĂ­deo?

  64. Go to Top of the page

  65. felix007 February 20, 2011

    this is a great tip and solved my ie/chrome problem, thank you for the good work

  66. Go to Top of the page

  67. Mike March 1, 2011

    Thanks a lot. Does anyone know of an update for this for the new youtube embed code that uses iframe?

  68. Go to Top of the page

  69. Mike March 2, 2011

    found it put ?wmode=transparent on the end of the src=”…” but it must be the first argument so

    http://www.youtube.com/embed/…?wmode=transparent&rel=0

    Not
    http://www.youtube.com/embed/…?rel=0&wmode=transparent

  70. Go to Top of the page

  71. frankie g March 10, 2011

    My embed code is different! Why?
    How can i fix a code like this?

  72. Go to Top of the page

  73. tom June 12, 2011

    in the youtube embeded section where you get the code. select “use old embeded code” and you will have the code like the one shown at the top of this page.

  74. Go to Top of the page

  75. Arun June 13, 2011

    thank u so much.. it was realy a gr8 help.. i was trying z-index.. :)

  76. Go to Top of the page

  77. Diego July 12, 2011

    Thanks Mike!! I was looking the solution for the new embed code that Youtube gives.

    It works perfectly!!

  78. Go to Top of the page

  79. Simon July 13, 2011

    I am using a Iframe for my you tube video and the code is allot shorter any ideas on how to insert your fix here? Thanks

  80. Go to Top of the page

  81. Julio July 14, 2011

    Thank you very much for your help.
    I search all the day the solution !

  82. Go to Top of the page

  83. Alex Weber July 14, 2011

    Life saver. Thanks.

  84. Go to Top of the page

  85. John July 15, 2011

    Hi. This is a great fix if you only have a few videos and it’s not a big deal to manually change the code. My problem is that i have a client that has hard coded all of their you tube videos into their CMS. The template that displays their videos only pulls out the video code from the CMS.

    Is it possible to change the video code pro grammatically via JavaScript or any other way? Any ideas would be very helpful. I’m updating their product pages, but there are thousands of products with this problem. Thanks!

  86. Go to Top of the page

  87. admin July 15, 2011

    Hi John, I would grab a copy of the database and do a batch search and replace of the code.. making triply sure you have backups before doing so.

  88. Go to Top of the page

  89. Johnny July 18, 2011

    Fantastic, well explained and works! The new style of youtube code is much shorter (found by clicking on ’share’, however youtube still provides the old style embed code. Is there a way to use the wmode=”transparent” in the newer shorter iframe code?

  90. Go to Top of the page

  91. iro88 August 4, 2011

    Thanks. Firstly I have some problems when I copy Your example and try to place my video params here, but finally I get code from YT and place only WMode param from Your example.

  92. Go to Top of the page

  93. Oliver October 5, 2011

    Hi, Have tried your fix above for normal flash file and lightbox but doesnt seem to be working on any IE version (including 9!), see page here http://iconenergy.co.uk/news.php (when you click on contact us). The code including fix is….

  94. Go to Top of the page

  95. admin October 5, 2011

    @Oliver: Seems to be working ok in IE9 here

    Specifically
    Version: 9.0.8112.16421 64-bit Edition
    Update Versions: 9.0.2 (KB2559049)

    Also ok in Firefox 7… but not in Chrome

    This fix is primarily for Youtube video however have you tried z-index on your problem? Making sure to use relative div’s?

  96. Go to Top of the page

  97. sM3e October 5, 2011

    You are a legend!! Took me ages to figure out what I was doing wrong seeing my Youtube videos appear through my lightbox.

    Thanks

  98. Go to Top of the page

  99. Johanna October 5, 2011

    Wow, thank you so much for that quick fix tip! :-)

  100. Go to Top of the page

  101. Shade October 8, 2011

    $(document).ready(function ()
    {$(’iframe’).each(function()
    {var url = $(this).attr(”src”);
    var result = url.search(/youtube/i);
    if(result!=-1)
    {$(this).attr(”src”,url+”&wmode=transparent”);
    }
    });
    });

    Try this if you have many youtube embedded videos on your site and you can’t (or too lazy) modify the src manually. It will add &wmode=transparent at the end of the src attribute and fix all iframes linked to youtube while avoiding hijacking the other iframes that are not linked to youtube. Just paste the code in a blank js file and include it. Hope this helps

  102. Go to Top of the page

  103. Shade October 8, 2011

    this will only work if src is something like youtube.com/something?rel=0. otherwise replace &wmode=transparent with ?wmode=transparent

  104. Go to Top of the page

  105. Shade October 8, 2011

    $(document).ready(function ()
    {$(’iframe’).each(function()
    {var url = $(this).attr(”src”);
    var result = url.search(/youtube/i);
    if(result!=-1)
    {result = url.indexOf(’?');
    if(result!=-1)
    {$(this).attr(”src”,url+”&wmode=transparent”);
    } else {$(this).attr(”src”,url+”?wmode=transparent”);}
    }
    });
    });

  106. Go to Top of the page

  107. Lisha October 17, 2011

    Wow! Thank you so much! I needed this! I had to use the old way of doing it, but it worked :)

  108. Go to Top of the page

  109. Filip October 27, 2011

    Thank you! Simple and good solution.

  110. Go to Top of the page

  111. E October 27, 2011

    Thank you so much!

  112. Go to Top of the page

  113. Michelle December 10, 2011

    thank you, thank you, thank you - you just saved me from pulling all my hair out!!!

  114. Go to Top of the page

  115. Joey January 2, 2012

    Hey,

    I have this problem except it’s not with a youtube video it’s with a navigation that I plugged into the website the nav bar will always be in front of the lightbox pics.

    How do I fix this?

    Thanks

  116. Go to Top of the page

  117. Tao January 10, 2012

    THANKS!!

  118. Go to Top of the page

  119. orjin krem January 13, 2012

    thank you very nice

  120. Go to Top of the page

  121. Lee January 18, 2012

    Thank you so much for taking the time to post this answer. Worked instantly.

  122. Go to Top of the page

  123. karl January 31, 2012

    Thank you! Really.

  124. Go to Top of the page

  125. Ryan February 6, 2012

    Awesome… thank you for the fix!

  126. Go to Top of the page

  127. Charles February 11, 2012

    Hey,
    thanks for the great Help, I had this issue with my premium subscription box at http://www.feedsapi.com and this tip just saved me a lot of headaches and took nothing more than a good targeted search and a copy and paste, overall 1 minute to fix this. Thanks

  128. Go to Top of the page

  129. ShoutOut March 17, 2012

    Thanks so much for the trick! It worked great for fixing a problem with some flash embed code for a professional profile widget that was appearing on top of my lightbox gallery effects! eg http://shoutoutadvertising.com/portfolio/pugfish-studios

    seems to work even in ie!

  130. Go to Top of the page

  131. Leonard March 22, 2012

    Amazing tip!

  132. Go to Top of the page

  133. Chris MG April 7, 2012

    Thanks you!!!!! This was driving me nuts and the new fix wasn’t working for me.

  134. Go to Top of the page

  135. matthew hunt April 9, 2012

    awesome! exactly what I was looking for! thanks mate!

  136. Go to Top of the page

  137. Cleaus April 14, 2012

    Thank you soooo much! Exactly what was looking for! THANK YOU!

  138. Go to Top of the page

  139. Chris May 8, 2012

    Thanks! Was trying to figure that one out for a while.

  140. Go to Top of the page

  141. Kai May 18, 2012

    Spot on! Thanks a LOT!

  142. Go to Top of the page

  143. Srinivas May 22, 2012

    Wow this is rocking, thanks a lot

  144. Go to Top of the page

  145. Steve July 18, 2012

    Thanks! I appreciate the help!

  146. Go to Top of the page

  147. Josia November 28, 2012

    Thanks it worked great for me!

  148. Go to Top of the page

Leave a comment