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

【问题标题】：FancyBox Custom Close Button Border-Radius IssueFancyBox 自定义关闭按钮边框半径问题
【发布时间】：2014-04-11 15:48:39
【问题描述】：

我为指向 YouTube 视频的花式框链接创建了一个自定义关闭按钮。当我添加边框半径使其成为圆形时，由于某种原因在 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/

【问题讨论】：

在我的 chrome 中的视频顶部显示为一个圆圈
这里一样，你在哪个浏览器上测试？
我的错，这个问题似乎只发生在 Firefox 中

标签： jquery html fancybox css

【解决方案1】：

您必须对代码进行一些调整：

1)。从此更改链接的 URL：

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

到这里

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

注意我们从v/切换到embed/并添加了尾随参数&wmode=opaque

2)。听起来很奇怪，将wmode 设置为opaque 也设置为您的iframe。您可以使用iframe API 选项来做到这一点，例如：

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

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

JSFIDDLE

【讨论】：