Computed Z-Index Does Not Match Element Style - html

Question

Currently working on an html5 video player. I am running into an issue where once the video element is fullscreen, my custom controls are not clickable due to the video's z-index being set to the max int value; the same as the controls z-index. the default browser media controls are already hidden.
<div id="video-container">
<video frameborder='0' id="page-video" playsinline>
<source src='{{source}}'>
</video>
<div class="container" id="player-controls">
<!-- controls go here -->
</div>
</div>
here's the css for the video container in fullscreen:
#video-container {
position: relative;
max-width: 512px;
margin: 0 auto;
}
here's the css for the video in fullscreen:
#page-video:-webkit-full-screen {
width: 100%;
height: 100%;
position: relative;
z-index: 1 !important;
}
Here is the css for the controls:
#player-controls {
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
visibility: hidden;
transition: all .2s linear;
padding: 0;
width: 100%;
z-index: 2147483647;
cursor: pointer;
}
in the Chrome dev tools, the computed z-index for the video element is changed from auto when its NOT in fullscreen to 2147483647 however clicking on the arrow to expand, it shows the z-index: 1 !important style from my style sheet. This style is not crossed out or anything. I don't really understand why this is happening. These are the only two places in my entire style sheet that use z-index. There are no negative z-indexes anywhere.

Answer 1

The video tag will ignore the z-index you set on it and use the UA styles of "auto" and 2147483647 unless you set position: absolute or position: fixed on it. See HTML5 video ignoring z-index

Answer 2

To hide the native controls, you need to disable them via the "controls" attribute.
<video controls="false">...</video>
In some browsers, there seems to be a bug so that the native controls are still visible in fullscreen mode. You can override the browsers stylesheet and hide them manually:
video::-webkit-media-controls {
display:none !important;
}
To show your custom controlls, simply set the z-index to the max int value.
#player-controls {
z-index: 2147483647;
}
All of this is described in this blog: https://css-tricks.com/custom-controls-in-html5-video-full-screen/