CODEWITHSUNDEEP
javascripthtmlcsshtml5-video
aman
aman

Reputation: 391

How to show my div panel in full screen HTML5 video player?

I'm creating my own HTML5 video player controllers interface. I have created a div and coloured it blue and shaped it as a block. It is able to follow the video player's size and window's size. But it is not being shown when the video player is in Full Screen Mode. Please help me show the div controls in full screen mode. My code is below.

Note that the FULL SCREEN Button does not work in stack overflow. But it works on my website.

The screen shot of The outcome I Get: contains additional black coloured space on top and bottom of the player. The video also consists white coloured space left and right of the video/player.

My Code:

#video_player {
    width: 100%;
    height: 100%;
}
 
/*
THIS CAUSES THE FULL SCREEN BUTTON TO HIDE
#video_player 
{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}
*/

#controls {
    width: 100%;
    height: 3%;
    opacity: 0.9;
    position: absolute;;
    bottom: 0;
    z-index: 100px;
    background-color:#55b2ff;
}

#video_player_box {
    position: relative;
    width: 100%;
    height: 75%;
}
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
</head>
<body>
    <div id="video_player_box">
        <video video-player controls id="video_player" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4"></video>
        <div id="controls">
        </div>
    </div><p>
    <button id="full_screen">FULL SCREEN</button>
    <script>
        var video_player = document.querySelector('#video_player_box');
        var button = document.getElementById("full_screen");
        button.addEventListener('click', function () {
            if(video_player.requestFullScreen){
                video_player.requestFullScreen();
            } else if(video_player.webkitRequestFullScreen){
                video_player.webkitRequestFullScreen();
            } else if(video_player.mozRequestFullScreen){
                video_player.mozRequestFullScreen();
            }
        });
    </script>
</body>
</html>

Screen Shots:

How I want the video and the player to cover the screen (with the div panel):

enter image description here

The outcome I Get:

enter image description here

Upvotes: 1

Views: 5159

Answers (1)

Kosh
Kosh

Reputation: 18413

You might request Fullscreen on your video_player_box container.
So replace var video_player = document.querySelector('[video-player]');
with var video_player = document.querySelector('#video_player_box');
and update your css (see the snippet below):

#video_player {
    width: 100%;
    height: 100%;
}

#controls {
    width: 100%;
    height: 6.5%;
    opacity: 0.9;
    position: absolute;;
    bottom: 0;
    z-index: 100;
    background-color:#55b2ff;
}

#video_player_box {
    position: relative;
    width: 100%;
    height: 75%;
}


#video_player_box:-moz-full-screen {height:100%}
#video_player_box:-webkit-full-screen {height:100%}
#video_player_box:-ms-fullscreen {height:100%}
#video_player_box:fullscreen {height:100%}
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
</head>
<body>
    <div id="video_player_box">
        <video video-player controls id="video_player" src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4"></video>
        <div id="controls">
            <!--CONTROLLERS WILL BE HERE-->
        </div>
    </div>
    <p><button id="full_screen">FULL SCREEN</button>
    <script>
        var video_player = document.querySelector('#video_player_box');
        var button = document.getElementById("full_screen");
        button.addEventListener('click', function () {
            if(video_player.requestFullScreen){
	            video_player.requestFullScreen();
            } else if(video_player.webkitRequestFullScreen){
	            video_player.webkitRequestFullScreen();
            } else if(video_player.mozRequestFullScreen){
	            video_player.mozRequestFullScreen();
            }
        });
    </script>
</body>
</html>

Upvotes: 3

Related Questions