[html] Is there a way to make HTML5 video fullscreen?

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?

You can change the width and height to be 100%, but it won't cover the browser chrome or the OS shell.

Design decision is because HTML lives inside the browser window. Flash plugins aren't inside the window, so they can go full screen.

This makes sense, otherwise you could make img tags that covered the shell, or make h1 tags so the whole screen was a letter.

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.

Yes. Well what happens with HTML5 video is that you just put the <video> tag and the browser will give it's own UI, and thus the ability for full screen viewing. It really makes life much better on us users to not have to see the "art" some developer playing with Flash could make :) It also adds consistency to the platform, which is nice.

From CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

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.

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

If you have option to define your site as progressive web app (PWA), then there is also option to use display: "fullscreen" under manifest.json. But this will only work if user adds/installs your webapp to home screen and opens it up from there.

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.

it's simple, all the problems can be solved like this,

1) have escape always take you out of fullscreen mode (this doesn't apply to manually entering fullscreen through f11)

2) temporarily display a small banner saying fullscreen video mode is entered (by the browser)

3) block fullscreen action by default, just like has been done for pop-ups and local database in html5 and location api and etc, etc.

i don't see any problems with this design. anyone think i missed anything?

I think that if we want to have a open way to view videos in our browsers without any closed source plugins (and all the security breaches that comes with the history of the flash plugin...). The tag has to find a way to activate full screen.. We could handle it like flash does: to do fullscreen, it has to be activated by a left click with your mouse and nothing else, I mean it's not possible by ActionScript to launch fullscreen at the loading of a flash by example.

I hope I've been clear enough: After all, I'm only a french IT student, not an english poet :)

See Ya!

HTML 5 video does go fullscreen in the latest nightly build of Safari, though I'm not sure how it is technically accomplished.

An alternative solution would be to have to browser simply provide this option on the contextual menu. No need to have Javascript to do this, though I could see when it would be useful.

In the mean time an alternative solution would simply be to maximise the window (Javascript can provide screen dimensions) and then maximise the video within it. Give it a go and then simply see if the results are acceptable to your users.

This is supported in WebKit via webkitEnterFullscreen.

A programmable way to do fullscreen is working now in both Firefox and Chrome (in their latest versions). The good news is that a spec has been draft here:

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

You will still have to deal with vendor prefixes for now but all the implementation details are being tracked in the MDN site:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

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.

As of Chrome 11.0.686.0 dev channel Chrome now has fullscreen video.

webkitEnterFullScreen();

This needs to be called on the video tag ele­ment, for example, to full­screen the first video tag on the page use:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

Notice: this is outdated answer and no longer relevant.

You can do this if you tell to user to press F11(full screen for many browsers), and you put video on entire body of page.

Many modern web browsers have implemented a FullScreen API that allows you to give full screen focus to certain HTML elements. This is really great for displaying interactive media like videos in a fully immersive environment.

To get the full screen button working you need to set up another event listener that will call the requestFullScreen() function when the button is clicked. To ensure that this will work across all supported browsers you are also going to need to check to see if the requestFullScreen() is available and fallback to the vendor prefixed versions (mozRequestFullScreen and webkitRequestFullscreen) if it is not.

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

Reference:- https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode Reference:- http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

Most of the answers here are outdated.

It's now possible to bring any element into fullscreen using the Fullscreen API, although it's still quite a mess because you can't just call div.requestFullScreen() in all browsers, but have to use browser specific prefixed methods.

I've created a simple wrapper screenfull.js that makes it easier to use the Fullscreen API.

Current browser support is:

• Chrome 15+
• Firefox 10+
• Safari 5.1+

Note that many mobile browsers don't seem to support a full screen option yet.