VideoJS全屏和Fancybox

Question

我正在用Fancybox中的VideoJS打开一个HTML5视频。哪些工作正常。除了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播放器进入全屏模式。每当Flash播放器全屏显示时，Fancybox的关闭按钮就会出现在视频的中间。

我解决它在CSS改变z-index设置的方法：

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

然后调整其入口关闭按钮的z-index不到外包装：

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

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