Scrollwheelie Scrollwheelie - 4 months ago 14
HTML Question

No Standard Full Screen Button for HTML5 <video>?

I have a

video
element that’s working beautifully with the standard controls in Safari (OS X 10.11 - El Capitan). I have play / pause, the scrubber, captions, and even AirPlay. …but there’s no full screen button. I swear I’ve seen that button on the normal controls before. The WebKit blog even has a screenshot with the button in an unrelated article (backdrop-filter is rad though, check it out).

Screenshot from webkit.org

Is this seriously not standard functionality?

I’ve added
fullscreen
to the
video
and
source
tags and even
fullscreen="fullscreen"
for good measure. The
controls
tag is working (I see the controls after all).

iOS’ controls are visually different and include the full screen button.

enter image description here

I’ve been hunting around and the most popular thing I can find is this super old StackOverflow article that basically says I need to use Javascript. That doesn't seem right. I feel like I’m taking crazy pills!

I suppose this could explain why so many sites roll their own controls using the JS hooks but it seems like a lot of work for expected functionality.

I realize I’m just asking for a ding in my pitiful reputation but I hope I’ve just missed something obvious.

Thank you in advance for your help / downvotes. :)

Answer

I figured this out, it was at least half stupidity.

Heading

I had the video element set to use max-width: 100% so it would fill the container on the page. I didn't think that would have any effect on the video's ability to go full screen.

No Metadata

The video didn't have any metadata to preload in the first place. I used an app to add a title to the file.