1

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.

VXp
  • 11,598
  • 6
  • 31
  • 46
oxygenplug
  • 33
  • 1
  • 6
  • There is no reason to ever use `2147483647` for `z-index`. Please use semantic values like `2`. – TylerH Sep 06 '18 at 15:01
  • @TylerH that is the default set for the video by the user agent style sheet per both CSS-Tricks: https://css-tricks.com/custom-controls-in-html5-video-full-screen and MDN: https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player and to clarify, even while the video's z-index is set to 1, the controls will not appear unless the z-index is set to 2147483647. Even 2147483646 will cause it to disappear. – oxygenplug Sep 06 '18 at 16:25
  • That is only the case for Safari. – TylerH Sep 06 '18 at 16:39
  • @TylerH https://gyazo.com/56630933dcc7911781de75a31b5dedf2 the Chrome user agent stylesheet is doing the same for some reason unless I am reading that incorrectly. – oxygenplug Sep 06 '18 at 17:16
  • https://gyazo.com/9ab30478074481064c5547c208c493b5 this is what i see when I check computed – oxygenplug Sep 06 '18 at 17:18
  • Why do you set the visibility of your controlls to "hidden"? – Franz Deschler Sep 07 '18 at 07:16
  • @FranzDeschler i have the visibility set to visible when the user hovers over the video – oxygenplug Sep 07 '18 at 13:28

2 Answers2

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

boldfacedesignuk
  • 1,643
  • 2
  • 11
  • 15
0

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/

Franz Deschler
  • 2,456
  • 5
  • 25
  • 39