Have a hard problem here: my video controls bar isn't showing up in fullscreen mode in Firefox. In Chrome, Opera, Safari everything is "Gucci in the Louis store" (done by `z-index: 2789034264 !important` ) but in Firefox it ignores `z-index`. The main function names are `exitHandler(),` `enterFullScreen()` and `exitFullScreen()`. Full code here: 

```js
var vid, playPauseButton, seekSlider, currentTime, vidDuration, muteButton, volumeSlider, fullScreenToggler, loop, fullscreenHider;

function intializePlayer(){
"use strict"; 
// Set object references 
vid = document.getElementById("vid");
playPauseButton = document.getElementById("playPauseButton");
seekSlider = document.getElementById("seekSlider");
currentTime = document.getElementById("done");
vidDuration = document.getElementById("duration");
muteButton = document.getElementById("muteUnmute");
volumeSlider = document.getElementById("volumeSlider");
fullScreenToggler = document.getElementById("toggleFullScreen");
loop = document.getElementById("loop");
fullscreenHider = document.getElementById("exitFullScreen");
// Add event listeners
playPauseButton.addEventListener("click",playPauseVideo,false);
seekSlider.addEventListener("input",timeSlider,false);
vid.addEventListener("timeupdate",videoTimeUpdate,false);
muteButton.addEventListener("click",muteUnmute,false);
volumeSlider.addEventListener("input",volumeChange,false);
volumeSlider.addEventListener("input",toggleIcon,false);
fullScreenToggler.addEventListener("click",enterFullScreen,false);
fullscreenHider.addEventListener("click",exitFullScreen,false);
document.addEventListener('webkitfullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false); 
loop.addEventListener("click",loopVideo,false);
//Add some other settings
vid.controls = false;
vid.oncontextmenu = function(){return false;};
}

window.onload = intializePlayer;

//Video Functions
function exitHandler(){
"use strict";
  if (document.webkitIsFullScreen === false || document.mozFullScreen === false || document.msFullscreenElement === false){
   document.getElementsByClassName("videoControls")[0].classList.remove("fullscreen"); 
    fullscreenHider.style.display = "none";
 fullScreenToggler.style.display = "inline-block";}
}
function playPauseVideo(){
"use strict";
 if(vid.paused){
  document.title = "►" + " " + document.title;
  vid.play();
  playPauseButton.innerHTML = '<i class="fa fa-pause" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>';}
 else {
  vid.pause();
  playPauseButton.innerHTML = '<i class="fa fa-play" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>';}
}
function timeSlider(){
"use strict";
 var slideTo = vid.duration * (seekSlider.value / 100);
 vid.currentTime = slideTo;
}
function videoTimeUpdate(){
"use strict";
 var timeInterval = vid.currentTime * (100 / vid.duration);
 seekSlider.value = timeInterval;
 var currentMinutes = Math.floor(vid.currentTime / 60);
 var currentSeconds = Math.floor(vid.currentTime - currentMinutes * 60);
 var durationMinutes = Math.floor(vid.duration / 60);
 var durationSeconds = Math.floor(vid.duration - durationMinutes * 60);
 if(currentSeconds < 10) {currentSeconds = "0"+ currentSeconds;}
 if(durationSeconds < 10) {durationSeconds = "0"+ durationSeconds;}
 if(currentMinutes < 10) {currentMinutes = "0"+ currentMinutes;}
 if(durationMinutes < 10) {durationMinutes = "0"+ durationMinutes;}
    currentTime.innerHTML = currentMinutes + ":" + currentSeconds; 
 vidDuration.innerHTML = durationMinutes + ":" + durationSeconds;
}
function volumeChange(){
"use strict";
 vid.volume = volumeSlider.value / 100;
}
function enterFullScreen(){
"use strict";
 if(vid.requestFullScreen){
  vid.requestFullScreen();}
 else if(vid.webkitRequestFullScreen){
  vid.webkitRequestFullScreen();}
 else if(vid.mozRequestFullScreen){
  vid.mozRequestFullScreen();}
 else if(vid.oRequestFullScreen){
  vid.oRequestFullScreen();}
 else if(vid.msRequestFullScreen){
  vid.msRequestFullScreen();}
 document.getElementsByClassName("videoControls")[0].classList.add("fullscreen");
 document.getElementsByClassName("fullscreen")[0].setAttribute("draggable","true");
    fullScreenToggler.style.display = "none";
 fullscreenHider.style.display = "inline-block";
 }
function exitFullScreen(){
"use strict"; 
 if(document.cancelFullScreen){
  document.cancelFullScreen();}
 else if(document.webkitCancelFullScreen){
  document.webkitCancelFullScreen();}
 else if(document.mozCancelFullScreen){
  document.mozCancelFullScreen();}
 else if(document.oCancelFullScreen){
  document.oCancelFullScreen();}
 else if(document.msCancelFullScreenn){
  document.msCancelFullScreen();}
    document.getElementsByClassName("videoControls")[0].classList.remove("fullscreen");
    fullscreenHider.style.display = "none";
 fullScreenToggler.style.display = "inline-block"; 
}
function loopVideo(){
"use strict"; 
 if(!loop.hasAttribute("style")){
  loop.setAttribute("style","opacity: 1; color: rgba(22,206,170,1.00);");
  vid.setAttribute("loop","");  
 }
 else {
  loop.removeAttribute("style");
  vid.removeAttribute("loop");
 }
}
function toggleIcon(){
"use strict"; 
if(vid.volume <= 0.01){
  muteButton.innerHTML = '<i class="fa fa-volume-off" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';}
else if(vid.volume <= 0.42){
 muteButton.innerHTML = '<i class="fa fa-volume-down" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';} 
else {
 muteButton.innerHTML = '<i class="fa fa-volume-up" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>';
}
}
var prev_level;

function muteUnmute(){
"use strict";
 if(vid.volume >= 0.03){
  prev_level = volumeSlider.value;
  volumeSlider.value = 0;
  vid.volume = volumeSlider.value;
  toggleIcon();
 }
    else if(vid.volume <= 0.05){
  volumeSlider.value= prev_level;
  vid.volume = volumeSlider.value / 100;
  toggleIcon();
 }
}

//KeyPress Fuctions

function pressSpaceToStart(e){
 "use strict"; 
 if(e.keyCode === 32){
    e.preventDefault();
       playPauseVideo();}
}
window.onkeypress = function(o){"use strict"; pressSpaceToStart(o);};
window.onkeydown = function(o){"use strict"; pressSpaceToStart(o);};
```

```css
@charset "UTF-8";
/* CSS Document */

/* Video Box Styling */
video::-webkit-media-controls, video::-webkit-media-controls-enclosure {display:none !important;}
section.videoSection {width: 100%; margin: auto; margin-top: 30px;}
div.mainVideo {text-align: center; width: 454px; margin: auto;} 
div.mainVideo video {width: 450px; border: 2px solid black; border-bottom: 0;}
div.videoControls {width: 450px; margin: -5px auto 0px; background-color: rgba(67,41,82,0.97); padding: 10px 0px 8px 0px; border: 2px solid black; color: snow; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
div.videoControls button {background-color: transparent; border: 0; opacity: 0.8;}
div.videoControls span {position: relative;}
div.videoControls button:hover {opacity: 1;}
/* Slider Styling */ 
input[type=range] {-webkit-appearance: none; margin: 5.8px 0;}

input[type=range]:focus {outline: none;}

input[type=range]::-webkit-slider-runnable-track {cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}

input[type=range]::-webkit-slider-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer; -webkit-appearance: none; margin-top: -7.8px;}

input[type=range]:focus::-webkit-slider-runnable-track {background: #b16cff;}

input[type=range]::-moz-range-track {width: 100%; cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}

input[type=range]::-moz-range-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;}

input[type=range]::-ms-track {width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent;}

input[type=range]::-ms-fill-lower {background: #a758ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}

input[type=range]::-ms-fill-upper {background: #ac62ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}

input[type=range]::-ms-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;}

input[type=range]:focus::-ms-fill-lower {background: #ac62ff;}

input[type=range]:focus::-ms-fill-upper {background: #b16cff;}

/* Non fullscreen track and thumb width and height */

/* Track */
.videoControls input[type=range]::-webkit-slider-runnable-track {height: 6.4px;}
.videoControls input[type=range]::-moz-range-track {height: 6.4px;}
.videoControls input[type=range]::-ms-track {height: 6.4px;}

/* Thumb */
.videoControls input[type=range]::-webkit-slider-thumb {height: 20px; width: 8px;}
.videoControls input[type=range]::-moz-range-thumb {height: 20px; width: 8px;}
.videoControls input[type=range]::-ms-thumb {height: 20px; width: 8px;}

/* Video Controls Buttons Styling */
#playPauseButton {float: left; margin: -3px 1px 0px 3px;}
#loop {float: left; margin: 4px 5px 25px 3px;}
#seekSlider {width: 150px; float: left; margin: 10px 5px 0px -1px;}
div.mainVideo span {color: snow; font-size: 0.97em; display: inline-block; float: left; margin: 2.5px 0px 0px 1px;}
#muteUnmute {margin-top: -5px; float: left;}
#volumeSlider {width: 64px; margin: 10px 0px 0px 0px; float: left;}
#toggleFullScreen {margin: 0px 0px 0px 4px;}

/* Fullscreen settings -START-*/

.fullscreen {z-index: 2789034264 !important; position: absolute !important; width: 80% !important; bottom: 5.7% !important; left: 10% !important; right: 10% !important; height: 35px !important;}
.fullscreen button i {font-size: 2.5em !important;}
.fullscreen button#playPauseButton {margin-left: 0.2% !important; float: left !important;}
.fullscreen input#seekSlider {width: 48% !important; margin-left: 2px !important;} 
.fullscreen button#muteUnmute {margin-left: 0.5%; font-size: 0.98em; margin-top: -10px;}
.fullscreen span {font-size: 1.2em !important;}
.fullscreen input#volumeSlider {width: 12%; margin-left: 1%;}
#exitFullScreen {margin-left: 0.5%; margin-top: -3px;}

/* Fullscreen track and thumb width and height */

/* Track */
.fullscreen input[type=range]::-webkit-slider-runnable-track {height: 12.8px;}
.fullscreen input[type=range]::-moz-range-track {height: 12.8px;}
.fullscreen input[type=range]::-ms-track {height: 12.8px;}

/* Thumb */
.fullscreen input[type=range]::-webkit-slider-thumb {height: 32px; width: 12px; margin-top: -10px;}
.fullscreen input[type=range]::-moz-range-thumb {height: 32px; width: 12px; margin-top: -10px;}
.fullscreen input[type=range]::-ms-thumb {height: 32px; width: 12px; margin-top: -10px;}

/* Responsibility -START- */

/* Responsibility -END- */
/* Fullscreen setting -END- */
```

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<section class="videoSection">
<div class="mainVideo">
 <video preload="auto" id="vid" onContextMenu="return false;">
  <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
  <source type="video/webm" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"/>
  <img src="media/images/videoErr.png" alt="Your browser doesn't support HTML5 video." title="Your browser doesn't support HTML5 video."/>
 </video> 
  <div class="videoControls">
   <button id="playPauseButton" title="Play/Pause">
   <i class="fa fa-play" aria-hidden="true" style="color: #15C936; font-size:1.7em; margin-top: 5px"></i>
   </button>
   <span id="timer">
   <span id="done" title="Time couter from the start of the video">00:00</span>
   <span>/</span>
   <span id="duration" title="Video duration">00:00</span>
   </span>
   <button id="loop" title="Loop">
   <i class="fa fa-repeat" aria-hidden="true" style="color: #09BF99; font-size: 1.5em"></i>
   </button>
   <input type="range" step="1" min="0" max="100" value="0" id="seekSlider" title="Slider" style=""/>
   <button id="muteUnmute" title="Mute/Unmute">
   <i class="fa fa-volume-up" aria-hidden="true" style="font-size: 2.4em; color: #C57A0C; margin-top: 5px;"></i>
   </button>
   <input type="range" step="1" min="0" max="100" value="100" id="volumeSlider" title="Volume level"/>
   <button id="exitFullScreen" style="display: none; font-size: 0.95em" title="Exit fullscreen">
   <i class="fa fa-sign-out" aria-hidden="true" style="color: whitesmoke;"></i>
   </button>
   <button id="toggleFullScreen" title="Enter fullscreen">
   <i class="fa fa-arrows-alt" aria-hidden="true" style="color: whitesmoke; font-size: 2em;"></i>
   </button>
  </div>
</div> 
</section>
```

And now some images: 

[![Chrome](https://i.stack.imgur.com/VhHgZ.png)](https://i.stack.imgur.com/VhHgZ.png) [![Opera](https://i.stack.imgur.com/3j3Ci.png)](https://i.stack.imgur.com/3j3Ci.png)
[![Safari](https://i.stack.imgur.com/u7Nhy.png)](https://i.stack.imgur.com/u7Nhy.png) [![Firefox](https://i.stack.imgur.com/CFuNC.png)](https://i.stack.imgur.com/CFuNC.png)