Currently, I am in the process of developing an HTML5 video player. However, I have encountered a problem where my custom controls become unclickable once the video element is set to fullscreen mode. This issue arises because the video's z-index is set to the maximum integer value, which is the same as the controls' z-index. It should be noted that 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">
<!-- custom controls go here -->
</div>
</div>
Below is the CSS for the video container when in fullscreen mode:
#video-container {
position: relative;
max-width: 512px;
margin: 0 auto;
}
And here is the CSS for the video itself when in fullscreen:
#page-video:-webkit-full-screen {
width: 100%;
height: 100%;
position: relative;
z-index: 1 !important;
}
Lastly, here is the CSS for the custom 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;
}
When inspecting the elements using Chrome Dev Tools, it was found that the computed z-index for the video element changes from 'auto' when not in fullscreen to '2147483647' when fullscreen. However, upon expanding the arrow to view the styles, it shows 'z-index: 1 !important' as specified in my stylesheet. This style is not overridden or crossed out, which has left me puzzled. These are the only two instances where z-index is utilized in my entire stylesheet, and there are no negative values assigned anywhere.