Is there a way to make HTML5 video fullscreen

Question

Is it possible to use the HTML5 video> tag to play a video in fullscreen mode?

Does anyone know whether there is a reason for this choice, if this is not possible?

Answer 1

Although the Fullscreen API defines an API for items to display themselves in fullscreen, HTML 5 does not offer a mechanism to make a movie fullscreen.

Any element, including videos, can use this.

Although Internet Explorer and Safari require prefixed versions, browser support is generally good.

Because the Stack Snippet sandboxing restrictions prevent it, an external demo is offered.

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