VideoJS 全屏和 Fancybox答案

【问题标题】：VideoJS fullscreen and FancyboxVideoJS 全屏和 Fancybox
【发布时间】：2012-11-29 06:38:04
【问题描述】：

我正在 Fancybox 中使用 VideoJS 打开一个 HTML5 视频。哪个工作正常。除了fancybox关闭按钮出现在视频上方。

如果我将其设置为较低的 z-index，则它会在未全屏时显示在视频下方。

知道如何解决这个问题吗？

【问题讨论】：

【解决方案1】：

有同样的问题...我相信这可以做得更干净，但我最终破解了打开的 video.js。

    // Turn on fullscreen (window) mode
    // Real fullscreen isn't available in browsers quite yet.
    enterFullScreen: function () {
        if (this.supportsFullScreen()) {
            this.html5EnterNativeFullScreen();
        } else {
            this.enterFullWindow();
        }
        // Hide fancybox close button
        $("#fancybox-close").hide();
    },

    exitFullScreen: function () {
        if (this.supportsFullScreen()) {
            // Shouldn't be called
        } else {
            this.exitFullWindow();
        }
        // Show fancybox close button
        $("#fancybox-close").show();
    },

【讨论】：

【解决方案2】：

我遇到了类似的问题，但 Flash 播放器进入全屏模式。每次 Flash 播放器全屏播放时，Fancybox 的关闭按钮都会出现在视频中间。

我解决它的方法是更改 CSS 中的 z-index 设置：

.fancybox-outer{
    z-index:200;
}

然后将其入口中关闭按钮的z-index 调整为小于外包装：

.fancybox-close {
    z-index:100;    
}

我应该注意，这仅在您使用默认的 fancybox 皮肤并在视频边缘留下填充时才有帮助。否则，您将看到视频后面的按钮（与 OP 一样）。

【讨论】：