Opening HTML5 Video in Full Screen Mode

These days videos come in very good quality and some of the paying sites provide HD quality videos as well. So, it is oftentimes users expand their video players in full screen mode. YouTube allows you to do that as well as myriad other commercially available video players.

HTML5 video control can also be opened in full screen mode with the help of webkitSupportsFullscreen property and webkitEnterFullscreen() method of our video control object. In order to exit out of full screen mode, user needs to press "Esc" button on their keyboard.

Here is HTML5 boilerplate code that allows us to expand and exit full screen mode with ease. 

    <!DOCTYPE html>

                <title>HTML5 Video Full Screen Mode Example</title>
        var      myVideo;

        window.onload = function()
            myVideo=      document.getElementById("myVideoFile");
            btnfullMode.addEventListener("click",      setFullScreenMode, false); 
            video.addEventListener("loadedmetadata", makeFullModeVisible,     false);

        function makeFullModeVisible()
                if (video.webkitSupportsFullscreen)

        function setFullScreenMode()
          <div id="video_container">
        <video width="320"     height="176"     src="myVideoFile.mp4"     id="myVideoFile"     autoplay />

                 <button type="button" id="btnfullMode"    >
                  Open Video in      Full Screen mode


Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …