FancyBox Custom Close Button Border-Radius Issue

Question

I've created a custom close button for a fancybox link that goes to a YouTube video. When I add a border-radius to make it a circle, the close button ends up behind the video when viewed in Firefox for some reason.

Here's the CSS:

.fancybox-close {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    cursor: pointer;
    background: #CCC;
    z-index: 8040;
}

The full site can be viewed here http://www.neoscapelabs.com/projects/469seventh/

Answer 1

You have to do a couple of tweaks to your code :

1). Change the URL of your link from this :

http://www.youtube.com/v/PzBk4-awY40?autoplay=1

to this

http://www.youtube.com/embed/PzBk4-awY40?autoplay=1&wmode=opaque

Notice we switched from v/ to embed/ and added the trailing parameter &wmode=opaque

2). As odd as it sounds, set wmode to opaque to your iframe too. You can do that with the iframe API option like :

iframe : {
    preload: false,
    wmode: "opaque"
}

BTW, I would also advise you to set preload to false.

JSFIDDLE