Html5 Full Screen Video

Is there a way to make HTML5 video fullscreen?

2020 answer

HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen API defines an API for elements to display themselves fullscreen.

This can be applied to any element, including videos.

Browser support is good, but Internet Explorer and Safari need prefixed versions.

An external demo is provided as Stack Snippet sandboxing rules break it.

<div id="one">
    One
</div>

<div id="two">
    Two
</div>

<button>one</button>
<button>two</button>

div {
    width: 200px;
    height: 200px;
}
#one { background: yellow; }
#two { background: pink; }

addEventListener("click", event => {
    const btn = event.target;
    if (btn.tagName.toLowerCase() !== "button") return;
    const id = btn.textContent;
    const div = document.getElementById(id);
    if (div.requestFullscreen) 
        div.requestFullscreen();
    else if (div.webkitRequestFullscreen) 
        div.webkitRequestFullscreen();
    else if (div.msRequestFullScreen) 
      div.msRequestFullScreen();
});

2012 answer

HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen specification supplies the requestFullScreen method which allows arbitrary elements (including <video> elements) to be made fullscreen.

It has experimental support in a number of browsers.

2009 answer

Note: this has since been removed from the specification.

From the HTML5 spec (at the time of writing: June '09):

User agents should not provide a
public API to cause videos to be shown
full-screen. A script, combined with a
carefully crafted video file, could
trick the user into thinking a
system-modal dialog had been shown,
and prompt the user for a password.
There is also the danger of "mere"
annoyance, with pages launching
full-screen videos when links are
clicked or pages navigated. Instead,
user-agent specific interface features
may be provided to easily allow the
user to obtain a full-screen playback
mode.

Browsers may provide a user interface, but shouldn't provide a programmable one.

Html5 Full screen video

No, there is no way to do this yet. I wish they add a future like this in browsers.

EDIT:

Now there is a Full Screen API for the web You can requestFullscreen on an Video or Canvas element to ask user to give you permisions and make it full screen.

Let's consider this element:

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

We can put that video into fullscreen mode with script like this:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { 
  elem.msRequestFullscreen();
}

Full documentation

HTML5 Video tag no fullscreen in frames

The <frame> and <frameset> elements are deprecated for security reasons and should not be used. Instead prefer the <iframe> one and CSS.

But even using this, you will need to add the allowfullscreen attribute so the video can request the browser's fullscreen mode from this iframe.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Video in frame</title>
</head>
<body>
  <iframe allowfullscreen src="video.html"></iframe> 
</body>
</html>

Since stacksnippet's iframe don't have this attribute themselves, we need to outsource the live example to jsfiddle.

Video 100% width and height

You can use Javascript to dynamically set the height to 100% of the window and then center it using a negative left margin based on the ratio of video width to window width.

http://jsfiddle.net/RfV5C/

var $video  = $('video'),
    $window = $(window); 

$(window).resize(function(){
    var height = $window.height();
    $video.css('height', height);

    var videoWidth = $video.width(),
        windowWidth = $window.width(),
    marginLeftAdjust =   (windowWidth - videoWidth) / 2;

    $video.css({
        'height': height, 
        'marginLeft' : marginLeftAdjust
    });
}).resize();

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

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>

How to code a HTML5 fullscreen video player with multiple videos in loop?

There is an "ended" event you can listen for on a element. You can do something like this to replace the src with a new video after the first one ends.

    // listener function changes src
    function myNewSrc() {
        var myVideo = document.getElementsByTagName('video')[0];
        myVideo.src = "http://mysite/myMovie2.m4v";
        myVideo.load();
        myVideo.play();
    }
    // add a listener function to the ended event
    function myAddListener(){
        var myVideo = document.getElementsByTagName('video')[0];
        myVideo.addEventListener('ended', myNewSrc, false);
    }