Cannot display custom video toolbar in fullscreen mode: firefox

I have created a custom video toolbar for displaying of video controls for HTML video tag.
i have positioned my custom toolbar to display over the video in full screen mode which displays correctly for Chrome but doesn’t work for Firefox

HTML

<div class="wrapper-video">
                    <video id="player" data-setup="{}" class='video-js vjs-default-skin' width='635' height='432'>
                      <source src="" type="video/mp4">
                    </video>
                    <div class="playpause"></div>
                </div>
                <div class="info-video-title-bar">//Custom toolbar with video controls
                    <progress value="0" max="1000" id="lecture_progress_bar" class="time-tooltip">
                      <div class="progress-bar" id="progress-bar">
                        <span style="width: 0%;">Progress: 0%</span>
                      </div>
                    </progress>
                    <style>
                    </style>
                    <div class="audio-controls-container">
                        <span id="video-control-play" class="lecture-icon icon-WebFont-55"></span>
                        <span id="control-seek" class="lecture-icon icon-WebFont-57" onclick="mixpanel.track('Lecture Seek');"></span>
                        <span id="control-playback-rate" class="lecture-icon icon-WebFont-60">
                        </span>
                        <span class="icon-WebFont-77 full-screen">
                    </div>            
                </div>

JS

$(document).on('click', ".full-screen", function(){
  if($(this).hasClass("icon-WebFont-77")){
    $(".video-js")[0].player.requestFullscreen();
  $(".info-video-title-bar").addClass("fixed");
  $("progress").addClass("fixed-progress");
  $(".audio-controls-container").addClass("fixed-controls");
  $(".full-screen").removeClass("icon-WebFont-77").addClass("icon-WebFont-79");
  }else if($(this).hasClass("icon-WebFont-79")){
    exitFullScreen();
  }
});

CSS

.fixed-progress{
  width: 100% !important;
}
.fixed{
  position: absolute;
  z-index: 999999999999;
  left: 0px;
  line-height: 1px !important;
}
.fixed-controls{
  max-width: 100%;
}
.video-js{
  position: absolute;
}
.wrapper-video{
  position: relative;
}