Show custom video control bar in Firefox

Question

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:

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);};

@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- */

<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:

http://stackoverflow.com/a/31710969/334402 - maybe useful reference — Mick, Apr 27 '17 at 04:45
@Mick Almost. But I have `position absolute` not `fixed` for my controls bar. — Eugen Eray, Apr 27 '17 at 04:52
@IsmailFarooq You know, I'm trying to learn how to create a web player myself. I'm m using the latest version of Firefox. — Eugen Eray, May 05 '17 at 10:28

cjg · Accepted Answer · 2017-05-07T18:51:08.243

Cool project!

Firefox full screen mode has a lot of quirks in my experience. In general with Firefox, you're probably better off setting full screen mode on a containing DIV rather than the element of interest per se. In this case, you can set it on class=mainVideo rather than id=vid. There might be easier ways to do this, but the following seems to work for me (I've tested in Chrome and Firefox--not sure about other browsers):

Add global variables at the top of your script to store reference to the mainVideo div, as well as the dimensions of mainVideo and vid:

var mainVideo, mainVideoHeight, mainVideoWidth, vidHeight, vidWidth;

Assign to these variables in initializePlayer():

vid = document.getElementById("vid");
mainVideo = document.getElementsByClassName('mainVideo')[0];
vidHeight = vid.clientHeight;
vidWidth = vid.clientWidth;
mainVideoHeight = mainVideo.clientHeight;
mainVideoWidth = mainVideo.clientWidth;

Modify enterFullScreen() to assign vid's and mainVideo's width and height to be equal to the screen width and height, and to request full screen on mainVideo rather than on vid:

function enterFullScreen(){
"use strict";

  if(mainVideo.requestFullScreen){
    mainVideo.requestFullScreen();}
  else if(mainVideo.webkitRequestFullScreen){
    mainVideo.webkitRequestFullScreen();}
  else if(mainVideo.mozRequestFullScreen){
    mainVideo.mozRequestFullScreen();}
  else if(mainVideo.oRequestFullScreen){
    mainVideo.oRequestFullScreen();}
  else if(mainVideo.msRequestFullScreen){
    mainVideo.msRequestFullScreen();}
  document.getElementsByClassName("videoControls")[0].classList.add("fullscreen");
  document.getElementsByClassName("fullscreen")[0].setAttribute("draggable","true");

  fullScreenToggler.style.display = "none";
  fullscreenHider.style.display = "inline-block";

  vid.style.width = screen.width + 'px';
  vid.style.height = screen.height + 'px';
  mainVideo.style.width = screen.width + 'px';
  mainVideo.style.height = screen.height + 'px';
}

Add additional code to the end of exitFullScreen() to reset the vid's and mainVideo's widths and heights to the original stored widths and heights:

   vid.style.width = vidWidth + 'px';
   vid.style.height = vidHeight + 'px';
   mainVideo.style.width = mainVideoWidth + 'px';
   mainVideo.style.height = mainVideoHeight + 'px';

The following is the full code that I tested. It will not work if you click 'Run code snippet'. You have to copy into a local file and open in a browser.

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <style>
  @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- */
  </style>
</head>
<body>
  <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>
</body>
<script>

var vid, playPauseButton, seekSlider, currentTime, vidDuration, muteButton, volumeSlider, fullScreenToggler, loop, fullscreenHider;
var mainVideo, mainVideoHeight, mainVideoWidth, vidHeight, vidWidth;



function intializePlayer(){
"use strict"; 



// Set object references  
vid = document.getElementById("vid");
mainVideo = document.getElementsByClassName('mainVideo')[0];
vidHeight = vid.clientHeight;
vidWidth = vid.clientWidth;
mainVideoHeight = mainVideo.clientHeight;
mainVideoWidth = mainVideo.clientWidth;

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(mainVideo.requestFullScreen){
    mainVideo.requestFullScreen();}
  else if(mainVideo.webkitRequestFullScreen){
    mainVideo.webkitRequestFullScreen();}
  else if(mainVideo.mozRequestFullScreen){
    mainVideo.mozRequestFullScreen();}
  else if(mainVideo.oRequestFullScreen){
    mainVideo.oRequestFullScreen();}
  else if(mainVideo.msRequestFullScreen){
    mainVideo.msRequestFullScreen();}
  document.getElementsByClassName("videoControls")[0].classList.add("fullscreen");
  document.getElementsByClassName("fullscreen")[0].setAttribute("draggable","true");

  fullScreenToggler.style.display = "none";
  fullscreenHider.style.display = "inline-block";
  vid.style.width = screen.width + 'px';
  vid.style.height = screen.height + 'px';
  mainVideo.style.width = screen.width + 'px';
  mainVideo.style.height = screen.height + 'px';
}

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";

   vid.style.width = vidWidth + 'px';
   vid.style.height = vidHeight + 'px';
   mainVideo.style.width = mainVideoWidth; + 'px'
   mainVideo.style.height = mainVideoHeight + 'px';
}

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);};
</script>

</html>

Giant thanks. Your script works good but! I'll paste some images here. Hope you'll update your answer. PS: maybe will be useful: I'm using iMac 21.5 running OS X. Maybe you use Windows and everything works good. Images: [Chrome,Opera and Safari](http://i.imgur.com/asaDIaF.png), [Firefox](http://i.imgur.com/8n9ZKyV.png). — Eugen Eray, May 06 '17 at 06:23
If you copy the entire last code snippet in my answer into an html document that you load locally, do you get the expected appearance? It works for me on Chrome and Firefox on Mac and Chrome and Firefox on Linux. The images you show would be consistent with what would happen if the following lines of code in `enterFullScreen` were somehow not working: ` vid.style.width = screen.width; vid.style.height = screen.height; mainVideo.style.width = screen.width; mainVideo.style.height = screen.height;` Or the document you're working with differs such that these style changes don't work. — cjg, May 06 '17 at 15:35
The thing is that for some reason attribute `style` is not adding after switching to full screen mode and is not deleting after going to regular mode. — Eugen Eray, May 07 '17 at 10:37
Can you share the full page you're working with so that we can troubleshoot? The fact that it's working with the demo I created but not with the code you're working with suggests that there's some difference that's preventing the `style` changes from being applied in your case. But it's difficult to know without being able to play with the broken code. — cjg, May 07 '17 at 16:52
Can I just upload HTML file to popular file sharing service? Will that be a ok decision? — Eugen Eray, May 07 '17 at 16:59
Here, [download HTML file](https://ufile.io/se9cc) . Because your snippet (in local file) doesn't add `style` attribute to video and it's container box, I tried to add some additional functions. But they don't work too. — Eugen Eray, May 07 '17 at 17:37
Try adding units in your style settings. For instance, `function videoFSstyling(video,videoBox){ video.style.width = screen.width + 'px'; video.style.height = screen.height + 'px'; videoBox.style.width = screen.width + 'px'; videoBox.style.height = screen.height + 'px';}` And do the same for `videoNotFSstyling`. Also, add calls to `videoNotFSstyling` in `exitFullScreen`. — cjg, May 07 '17 at 18:37

score 0 · Answer 2 · answered May 05 '17 at 10:18

0

I haven't played around with this before but I hope this could help you.

I had a look at the following post : https://css-tricks.com/custom-controls-in-html5-video-full-screen/

See the topic in the post : By setting the controls attribute of the video element to false, we are able to hide the controls but for some reason, when entering full-screen mode they reappear, despite being hidden in normal screen mode. (Why?)

So is firefox actually not the correct one or behaving like its supposed to?

A test that you can do is set the controls attribute of the video element to true and see what it does in all the browsers. vid.controls = true;

Hopes it gives you direction or something to try.

answered May 05 '17 at 10:18

Renier

1,738
3
24
51

Controls false is working nice but I need to show my goddamn custom controls bar. – Eugen Eray May 05 '17 at 10:20
`vid.controls = false` hides the default control bar in Firefox. `vid.controls = true ` shows them. That's expected. – Eugen Eray May 05 '17 at 10:26
did you try css: .custom-video-controls { z-index: 2147483647; } "Setting it to 2147483646 made the controls disappear in full-screen mode on Firefox and, sometimes (a bug?), in Chrome, so the z-index for the controls container should be >= 2147483647." – Renier May 05 '17 at 10:35
Yes, works for Chrome, Opera and Safari. But not for Firefox and Firefox-based browsers. – Eugen Eray May 05 '17 at 10:42
When viewing it from firefox what is z-index supplied by the user agent style sheet? – Renier May 05 '17 at 11:10
And did you set the .custom-video-controls { z-index: 2147483647; } then larger than that value? Sorry for all the questions trying to troubleshoot. – Renier May 05 '17 at 11:11
Ummm... Yes, number that I'd typed in CSS code in snippet (you may not noticed that when you're switching to full screen mode, JavaScript adds a new CSS class called `.fullscreen` to element `div.videoControls` and when you're exiting the full screen mode it removes this full screen class) is a bit larger than 2147483647. But still doesn't work. And for some reason I can't find property z-index for embedded Firefox controls bar in inspector. Maybe I'm stupid. – Eugen Eray May 05 '17 at 16:33
I took your code and tested it in firefox.. I see what you are saying I am getting the same results only in firefox. I will continue trying to help you.. I also now want to know why. – Renier May 06 '17 at 06:21

Show custom video control bar in Firefox

2 Answers2