Fancybox 关闭按钮不在 youtube 视频之上答案

【问题标题】：Fancybox close button not on top of youtube videosFancybox 关闭按钮不在 youtube 视频之上
【发布时间】：2012-07-23 19:56:40
【问题描述】：

我在使用 youtube 视频时遇到的问题是右上角的“关闭 x”按钮不在 youtube 视频的顶部。由于某种原因，它卡在它们下面。我已经在所有浏览器中尝试过，看看这是否只是一个 IE 问题，但似乎所有 youtube 视频都发生了这种情况。

我也进入了 .css 并将 z-indext 更改为如此疯狂的高数字，看看它是否会修复它，但没有运气，有人遇到过这个问题吗？它似乎仅限于 youtube 视频。

【问题讨论】：

标签： youtube fancybox fancybox-2

【解决方案1】：

这是因为 youtube 使用的 flash 播放器不会在默认窗口模式下尊重 CSS 的 z-index 值（参数名称是 wmode）

嵌入 youtube iframe 时，将 wmode=opaque 参数添加到 URL（wmode=transparent 也可以），因此它看起来像这样：

<iframe width="420" height="315" src="http://www.youtube.com/embed/<youtbue_id>?wmode=opaque" frameborder="0" allowfullscreen></iframe>

【讨论】：

好吧，我没有嵌入视频。我只是在使用媒体助手获取 youtube URL 以在 fancybox 中使用。

【解决方案2】：

@complex857 是对的，您需要将 youtube 视频的wmode 设置更改为opaque。

最好的方法是：

1)。从这里https://github.com/fancyapps/fancyBox/tree/master/source获取最新版本的fancybox（和助手）

2)。除了常规的 fancybox css 和 js 文件外，添加 fancybox-media helper js 文件，例如（检查您自己的路径）：

<script type="text/javascript" src="fancybox2.0.6/helpers/jquery.fancybox-media.js"></script>

3)。这个新版本允许您通过自定义脚本将特定参数传递给 youtube，例如：

   $(document).ready(function(){
    $(".fancybox").fancybox({
        // other API options here
        padding: 0, // optional
        // set helpers media
        helpers : {
         media : {}
        },
        // NEW youtube media settings
        youtube : {
         autoplay    : 0, // 1 = will enable autoplay
         wmode       : 'opaque'
        }
    }); // fancybox
   }); // ready

注意：这是为fancybox v2.0.6+

【讨论】：

如何从github下载单个文件？