Cannot display custom video toolbar in fullscreen mode: firefox - html

Question

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