html - HTML5 ビデオ フルスクリーン

Question

HTML5 ビデオ プレーヤーを作成しようとしました。CSS と jQuery を使用してカスタム コントロールを作成しました。しかし、フルスクリーン モードをオンにすると、カスタム コントロールがフルスクリーンで表示されません。

フルスクリーン モード オフ:

フルスクリーン モードはオンですが、カスタム コントロールはありません:

Answer 1

カスタムコントローラーを表示

z-indexカスタム コントロール要素に追加してください

#customController{
  -------------------;
  -------------------;
  -------------------;
  z-index: 2147483647;
}

ネイティブコントローラーを隠す

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