全屏时更改html5视频控件布局

Question

我正在关注如何更改html5视频控件布局的this教程。但是当我进入全屏模式时，控件会恢复默认状态。有没有人举例说明如何在全屏模式下更改布局？

Answer 1

在普通和全屏模式下完全隐藏原生控件：

video::-webkit-media-controls-enclosure {
  display:none !important;
}

将自定义控件的z-index设置为等于或高于2147483647：

#video-controls {
  z-index: 2147483647;
}

来源：Hiding Native HTML5 Video Controls in Full-Screen Mode

注意：如果您关注的是tutorial，那么您还需要设置position自定义控件以使其可见：

#video-controls {
  z-index: 2147483647;
  position: absolute; /* top left corner, change it if you like */
}