z-index Flash Objects Thickbox Fix Colorbox Over Youtube
Wed, 2007/09/12 - 18:01 | 
phil 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
- Wrap your flash content in a div
- Add
<param name="wmode" value="transparent"> to your object tag
- Set
wmode="transparent" in the embed tag
- 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
<param name="wmode" value="transparent"> to your object tagwmode="transparent" in the embed tag#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!
The Wichita Computer Guy is hosted by one of the best hosting companies on the market: Hostgator.com. Not only do they provide unlimited domain addons, subdomains and parked domains, they also offer unlimited databases, unlimited hosting space and unlimited bandwidth! We have been using Hostgator for several years now and had great customer service support and almost 100% uptime. If you are looking for a website hosting company that provides everything you need for a powerful CMS based website, take a look at Hostgator.com!!
Thanks dude! Thats what I was
Thanks dude! Thats what I was looking for :)
GREATT !
It work ! Thank You very much
Thanks
Brilliant - just what I was looking for! Cheers!
Thanx
Thanks a lot lad.. This post saved me a lot of time!
Thanks
Thanks...A lot..
great -- thank you so much
encountered this problem every now and then - and now i could solve it. thanks!
karl
Great stuff
perfectly working... thanks
flash over thickbox
works like butter dude ...
good goin Mani
THANKS!
Perfect. Exactly what I needed!
thank you for the solution, I
thank you for the solution, I had the same problem and it works perfectly.
Thnx man.. :D i was having
Thnx man.. :D i was having trouble fixing it.
Worked perfectly...Thank you!
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!
Yay! That works great! I get
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 :)
Cool!
Wow!!! Great stuff!!! Thanks a lot!!!
grazie.
Ottimo funziona perfettamente. Grazie. Ivan (Italy) (Translate via Google)
Thaaaaanks. Worked great.
Was looking for a solution for that problem for a while. You solved it.
Check this out, worked for
Check this out, worked for me and is a link from http://jquery.com/demo/thickbox/
http://www.communitymx.com/content/article.cfm?cid=E5141
cheers
Thank you so much. Nice work.
Thank you so much. Nice work.
Thank you so much.....
Thank you so much.....
Works
It really works great friend. . Thanks a lot.. saved lot of my repetation work