Lightbox / Thickbox / Menu disappears behind Flash / YouTube video [fixed]
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 
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
- 21.06.12: An A-Z Index of the Bash command line for Linux. (0)
- 17.09.12: Import Export sql database the easy way via SSH (0)
Comments RSS Feed
Helped a lot cheers!!
Go to Top of the page
Great tip and exactly the method I used to get an accordian menu, Flash file and Lightbox to work with on a customers website.
Go to Top of the page
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
Go to Top of the page
Good job, but for me, doesn’t work in FF
Go to Top of the page
@Oncle, really!?
Could you tell us what version of Firefox you are using?
Does the example page work for you:
http://tinyurl.com/lqpnfp
Go to Top of the page
Should be ok now Oncle, it was a slight bug with the old version of Firefox you were using and the Gallery software.
Go to Top of the page
thanx!
Go to Top of the page
Thank you for the hint! Solved my problem, great work!
Go to Top of the page
Great !! You saved my life !! Thanks !!
Go to Top of the page
thanks a lot for that, it worked a treat. I’ll have to bookmark this page for future reference!
Go to Top of the page
Thanks - huge help on our drupal website!
Go to Top of the page
great help for me. cheers!!
Go to Top of the page
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.
Go to Top of the page
Absolute livesaver. Nice one!
Go to Top of the page
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
Go to Top of the page
@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.
Go to Top of the page
Thank you so much. I’d almost given up on this problem.
Go to Top of the page
Its taken me nearly 16 hours to find this fix.
thank you it works like a dream in Joomla 1.5
Go to Top of the page
Been looking for this fix for over 2 years. The embed part is what really fixes the issue!!! Thanks man!!!!
Go to Top of the page
well thank you sir! your a life saver
Go to Top of the page
You’re my hero. Thanks
Go to Top of the page
Thank you a million times over. A headache solved.
Go to Top of the page
I’ve tried soooo many things and this worked instantly, thanks!!!!!
Go to Top of the page
Thank you so much!
This helped me put my youtube video right under my image gallery!!
Exactly what I was looking for!
Go to Top of the page
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?
Go to Top of the page
Hi Justin, Please send a link to your website, so that we can see the problem, thanks Voodish.
Go to Top of the page
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;)
Go to Top of the page
No probs, hopefully we can get it working as it should
Go to Top of the page
helped a lot boss! you are the boss!
Go to Top of the page
Thank you very much. This is a very good post!!! It helped me a lot!!!
Go to Top of the page
this is a great tip and solved my ie/chrome problem, thank you for the good work
Go to Top of the page
Thanks a lot. Does anyone know of an update for this for the new youtube embed code that uses iframe?
Go to Top of the page
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
Go to Top of the page
My embed code is different! Why?
How can i fix a code like this?
Go to Top of the page
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.
Go to Top of the page
thank u so much.. it was realy a gr8 help.. i was trying z-index..
Go to Top of the page
Thanks Mike!! I was looking the solution for the new embed code that Youtube gives.
It works perfectly!!
Go to Top of the page
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
Go to Top of the page
Thank you very much for your help.
I search all the day the solution !
Go to Top of the page
Life saver. Thanks.
Go to Top of the page
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!
Go to Top of the page
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.
Go to Top of the page
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?
Go to Top of the page
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.
Go to Top of the page
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….
Go to Top of the page
@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?
Go to Top of the page
You are a legend!! Took me ages to figure out what I was doing wrong seeing my Youtube videos appear through my lightbox.
Thanks
Go to Top of the page
Wow, thank you so much for that quick fix tip!
Go to Top of the page
$(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
Go to Top of the page
this will only work if src is something like youtube.com/something?rel=0. otherwise replace &wmode=transparent with ?wmode=transparent
Go to Top of the page
$(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”);}
}
});
});
Go to Top of the page
Wow! Thank you so much! I needed this! I had to use the old way of doing it, but it worked
Go to Top of the page
Thank you! Simple and good solution.
Go to Top of the page
Thank you so much!
Go to Top of the page
thank you, thank you, thank you - you just saved me from pulling all my hair out!!!
Go to Top of the page
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
Go to Top of the page
THANKS!!
Go to Top of the page
thank you very nice
Go to Top of the page
Thank you so much for taking the time to post this answer. Worked instantly.
Go to Top of the page
Thank you! Really.
Go to Top of the page
Awesome… thank you for the fix!
Go to Top of the page
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
Go to Top of the page
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!
Go to Top of the page
Amazing tip!
Go to Top of the page
Thanks you!!!!! This was driving me nuts and the new fix wasn’t working for me.
Go to Top of the page
awesome! exactly what I was looking for! thanks mate!
Go to Top of the page
Thank you soooo much! Exactly what was looking for! THANK YOU!
Go to Top of the page
Thanks! Was trying to figure that one out for a while.
Go to Top of the page
Spot on! Thanks a LOT!
Go to Top of the page
Wow this is rocking, thanks a lot
Go to Top of the page
Thanks! I appreciate the help!
Go to Top of the page
Thanks it worked great for me!
Go to Top of the page