z-index Flash Objects Thickbox Fix Colorbox Over Youtube

Author:
phil
Created:
Wednesday, September 12th, 2007
Last Updated:
Sunday, December 18th, 2011

Disclaimer: Accessing the information on this page means you agree to the Sites Terms of Service


I had an issue with thickbox where it would show the image behind a flash video in FireFox. IE7 worked great. I ran across Sheriar Designs Blog posting a fix specifically for DHTML menus over a flash video. I figured I would give it a try and much to my surprise, the suggestion worked! I give ALL CREDIT to the author of the blog, Mani (Pronounced like Bonnie, not Mani like Danny)

I merely wanted to blog the information for my own record keeping, plus to help 'index' the solution for others.

Mani's Solution
  1. Wrap your flash content in a div
  2. Add <param name="wmode" value="transparent"> to your object tag
  3. Set wmode="transparent" in the embed tag
  4. Use css to set the position and z-index for your div (don't set negative z-index values as it will make your flash disappear)
The CSS
#flash {
position: relative; /*or absolute*/
z-index: 0;
}
The XHTML
<div id="flash">
<object ...>
  <param name="wmode" value="transparent">
  <embed ... wmode="transparent">
</object>
</div>

And, in Mani's words... That's It!

Update 2011/12/18: I ran into the same issue using Youtube's new iframe format and Colorbox... After running across a post on maxmorgandesign.com, the solution is pretty simple: Simply add ?wmode=transparent

Example:

<iframe width="420" height="315" src="http://www.youtube.com/embed/nGeKSiCQkPw?wmode=transparent" frameborder="0" allowfullscreen></iframe>

I'm assuming this also works with Thickbox and it doesn't appear to require any special css magic!

Post Comment

Comments

This works fine for me, I just added the wmode="transparent" in embed and it beginned transparent.

I tried this instead :

$(document).bind('cbox_open', function(){
$('embed:visible').css('visibility','hidden').addClass('colorbox-hidden-fix');
});
$(document).bind('cbox_closed', function(){
$('embed.colorbox-hidden-fix').css('visibility','visible');
});

But this solution isnt very friendly by the way.

Thanks dude! Thats what I was looking for :)

It work ! Thank You very much

Brilliant - just what I was looking for! Cheers!

Thanks a lot lad.. This post saved me a lot of time!

Thanks...A lot..

encountered this problem every now and then - and now i could solve it. thanks!

karl

perfectly working... thanks

works like butter dude ...
good goin Mani

Perfect. Exactly what I needed!

thank you for the solution, I had the same problem and it works perfectly.

Thnx man.. :D i was having trouble fixing it.

Thank you so much. Nice work.

Thank you so much.....

It really works great friend. . Thanks a lot.. saved lot of my repetation work

Was looking for a solution for that problem for a while. You solved it.

Ottimo funziona perfettamente. Grazie. Ivan (Italy) (Translate via Google)

Wow!!! Great stuff!!! Thanks a lot!!!

Yay! That works great! I get an outline around the flash movie when I hover over it though although it disappears when I click on it.

Well done :)

I had the same problem - except that it was working fine in Firefox, but not in IE7 (go figure). Anyways the fix you suggested worked like a charm. Thank you!