Is there a way to make HTML5 video fullscreen?

Question

Is there a way to play a video fullscreen using the HTML5 <video> tag?

And if this is not possible, does anybody know if there is a reason for this decision?

Answer 1

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.

---

Original answer:

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.

---

Note that the above warning has since been removed from the specification.

Answer 2

No, it is not possible to have fullscreen video in html 5. If you want to know reasons, you're lucky because the argument battle for fullscreen is fought right now. See WHATWG mailing list and look for the word "video". I personally hope that they provide fullscreen API in HTML 5.

Answer 3

Safari supports it through webkitEnterFullscreen.

Chrome should support it since it's WebKit also, but errors out.

Chris Blizzard of Firefox said they're coming out with their own version of fullscreen which will allow any element to go to fullscreen. e.g. Canvas

Philip Jagenstedt of Opera says they'll support it in a later release.

Yes, the HTML5 video spec says not to support fullscreen, but since users want it, and every browser is going to support it, the spec will change.

Answer 4

If none of these answers dont work (as they didnt for me) you can set up two videos. One for regular size and another for fullscreen size. When you want to switch to fullscreen

1. Use javascript to set the fullscreen video's 'src' attribute to the smaller videos 'src' attribute
2. Set the video.currentTime on the fullscreen video to be the same as the small video.
3. Use css 'display:none' to hide the small video and display the big one with the via 'position:absolute' and 'z-index:1000' or something really high.

Answer 5

Firefox 3.6 has a full screen option for HTML5 video's, right-click on the video and select 'full screen'.

The latest Webkit nightlies also support full screen HTML5 video, try the Sublime player with the latest nightly and hold Cmd / Ctrl while selecting the full screen option.

I guess Chrome / Opera will also support something like this. Hopefully IE9 will also support full screen HTML5 video.

Answer 6

The complete solution:

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }