z-index is not working with fancybox in google chrome

Question

I am using a lightbox created by FancyBox. It opens a youtube video and it works fine. In google chrome, I did notice that the close button is going behind the video. I messed with the z-index and its not working properly in google chrome. I messed with it in firefox and it works just fine. The positions are set and everything. Any ideas?

Here is the website: http://theadamgrp.com/test/hcsmu/ Click on the "Click here to watch his testimonial" next to a thumbnail picture on your right.

Thanks for any help!

Are you using the [latest version of fancyBox](http://fancyapps.com/fancybox/)? — Sparky, Apr 16 '12 at 15:40
I can't repro the problem in Chrome 18 (OS X). http://i.stack.imgur.com/gNetf.png — Matt Ball, Apr 16 '12 at 15:41
possible duplicate of [Youtube iframe wmode issue](http://stackoverflow.com/questions/4050999/youtube-iframe-wmode-issue) — Dagg Nabbit, Apr 16 '12 at 15:41
yes i am using the latest version. The &wmode=transparent worked nicely! — Alex Kittavong, Apr 16 '12 at 16:01

score 1 · Accepted Answer · answered Apr 16 '12 at 15:52

I can see the problem as described in chromium 17 / ubuntu.

Adding the following to the YouTube iframe's URL fixes it for me:

&wmode=transparent

YouTube passes the wmode URL parameter into the SWF object. Adobe has more information on Flash's wmode property.

score 1 · Answer 2 · answered Apr 16 '12 at 16:03

1

Make sure that you are using position:relative/abosulte/etc... for the positioned DIV, or the z-index will not matter.

answered Apr 16 '12 at 16:03

Dustin Wilson

1,634
1
12
18

z-index is not working with fancybox in google chrome

2 Answers2