带有自定义按钮的HTML 5视频播放器无法在全屏模式下使用

Question

我正在创建一个带有自定义控件的HTML 5视频播放器。我已经提到了下面的网址。

http://iandevlin.github.io/mdn/video-player/

当最新的chrome和firefox浏览器中的播放器全屏显示时，自定义视频播放器控件（播放，暂停等）无法正常工作。请帮我解决这个问题。

Answer 1

全屏按钮仍保留在视频#video 下，因此您尝试点击视频布局而不是点击按钮。使用z-index达到这个目的：

video#video{
    z-index: 1;
}
ul#video-controls{
    z-index: 9999;
}

这会将按钮移到前面，使其能够被点击。