<video> fullscreen expands document, not element itself — why?

Question

I want the user to be able to use the native <video> controls of a <video> on this page/overlay, but right now the fullscreen action expands the whole website document rather than the video element itself, which isn't showing the overlay and its video at all.

Why isn't the <video> element full-screen'd by itself, natively in browsers?

Can I override the default behavior and use requestFullscreen()?

Thanks!

Answer 1

It's probably because you're calling requestFullscreen() from the window (the default if you call the method on its own)

You can also call it from a specific element, such as your video element.

document.getElementById('video').requestFullscreen()

Demo