jquery - FancyBox 自定义关闭按钮边框-半径问题

Question

我为转到 YouTube 视频的花式框链接创建了一个自定义关闭按钮。当我添加一个 border-radius 使其成为一个圆圈时，出于某种原因在 Firefox 中查看时关闭按钮最终会出现在视频后面。

这是 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;
}

完整的网站可以在这里查看 http://www.neoscapelabs.com/projects/469seventh/

Answer 1

你必须对你的代码做一些调整:

1).从此更改链接的 URL:

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"
}

顺便说一句，我还建议您将 preload 设置为 false。

JSFIDDLE