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

This is supported in WebKit via webkitEnterFullscreen.

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.