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的情況一樣）。