Question

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

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

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

Answer 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();
    },

Answer 2

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

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

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

然后将其条目中关闭按钮的z-index调整为小于外部包装器：

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

我应该注意，这只有在你使用默认的fancybox皮肤并在视频边缘留下填充时才有用。否则你会看到视频背后的按钮（与OP的情况一样）。

VideoJS全屏和Fancybox

2 个答案: