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?

Solution 1

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.

Solution 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.

Solution 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.

Solution 4

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.

Solution 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

View more solutions

Comments

[ghoppe]

@MiffTheFox A modern browser HTML5 support feature checklist can be found here: findmebyip.com/litmus/#html5-web-applications

[Wouter Dorgelo]

##World's First True HTML5 Fullscreen Video## blog.jilion.com/2011/07/27/… Also see: wiki.mozilla.org/Gecko:FullScreenAPI

[mwilcox]

Big +1 for the link to that mailing list.

[mwilcox]

Why the negative vote? Safari 5 has fullscreen in its native controls. (No API though! grrrr)

[matt burns]

This answer is outdated, see the answer by Sindre Sorhus (and then vote it up so that it overtakes these out of date answers)

[matt burns]

This answer is outdated, see the answer by Sindre Sorhus (and then vote it up so that it overtakes these out of date answers)

[Admin]

Its not working. Iframe1 has child iframe2 from iframe2 when full-screen is applied it does nothing.

[Sindre Sorhus]

@YumYumYum from readme: "If your page is inside an <iframe> you will need to add a allowfullscreen attribute (+ webkitallowfullscreen and mozallowfullscreen)."

[Avatar]

The demo seems not to work with Android 4.3's default browser.

[Vish]

Working in Chrome or Chromium and in Node-Webkit!

[Udara Suranga]

@SindreSorhus is this support mobile browses now??

[RamenChef]

This doesn't answer the question.

[RamenChef]

This isn't really fullscreen.

[Ravi Mishra]

We need a dynamic full screen for a video player.