VideoJS fullscreen and Fancybox

I am opening a HTML5 video with VideoJS in Fancybox. Which works fine. Except for the fact that the fancybox close button appears above the video.

If I set it to a lower z-index then, it appears under the video when开发者_开发知识库 not in fullscreen.

Any idea how to fix this?

had the same issue... I'm sure this could be done cleaner, but I ended up cracking open 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();
    },

I had a similar problem, but with the Flash player going to fullscreen mode. Every time the Flash player would go fullscreen, the close button from Fancybox would appear right in the middle of the video.

The way I solved it was to change the z-index settings in the CSS:

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

then tweak the z-index of the close button in its entry to less than the outer wrapper:

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

I should note that this only helps if you're using the default fancybox skin and leave a padding around the edge of the video. Otherwise you will see the button behind the video (as was the case with the OP).