VideoJS полноэкранный и Fancybox

Question

Я открываю видео HTML5 с VideoJS в Fancybox. Который работает отлично. За исключением того, что над видео появляется кнопка закрытия fancybox.

Если я установлю его на более низкий z-индекс, то он появится под видео, когда не в полноэкранном режиме.

Есть идеи, как это исправить?

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 Player в полноэкранный режим. Каждый раз, когда проигрыватель Flash работал в полноэкранном режиме, кнопка закрытия из Fancybox появлялась прямо в середине видео.

То, как я решил, было изменить настройки z-index в CSS:

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

затем настройте z-index кнопки закрытия в своем входе на значение меньше, чем внешняя оболочка:

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

Следует отметить, что это помогает только в том случае, если вы используете стандартную обложку fancybox и оставляете отступ вокруг края видео. В противном случае вы увидите кнопку за видео (как в случае с ОП).