html5 video fullscreen,html - Is there a way to make HTML5 video fullscreen? - Stack Overflow

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.

One

Two

one

two

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 elements) to be made fullscreen.

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.