Scrollwheelie Scrollwheelie - 4 years ago 190
HTML Question

No Standard Full Screen Button for HTML5 <video>?

I have a

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

Is this seriously not standard functionality?

I’ve added
to the
tags and even
for good measure. The
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 Source

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


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download