4

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. :)

Community
  • 1
  • 1
Scrollwheelie
  • 811
  • 2
  • 9
  • 16
  • I noticed [this](http://stackoverflow.com/questions/35366331/how-does-the-browser-determine-whether-a-full-screen-button-is-shown-or-not-for?rq=1) other post but it's not the same. The video isn't in an `iframe` -- no embeds or spurious dom elements. I'm hosting the video on my server and including it with a simple `video` tag. – Scrollwheelie Jul 17 '16 at 20:31

3 Answers3

2

I was in a panic over the problem until I discovered that a <video> contained in a "popup window" instead of a regular window/tab is will cause the <video> tag to drop the fullscreen button in its controls.

My "page preview" happened to be launched in a pop-up window, and having maximized that, it took me a while to eliminate various factors before concluding that it was a popup vs. normal window/tab issue.

The behaviour that I experienced was in Chrome. I haven't tried it with other browsers.

Additionally: Also, note that within IFRAME also behaves the same way, dropping the fullscreen button, too (from the comments).

starlocke
  • 3,407
  • 2
  • 25
  • 38
  • 1
    Thanks for this tip! Looks to be the same for when it's running within an IFRAME. – zumek Oct 28 '16 at 07:37
  • Upgrading Chrome from 61 to 62 made the fullscreen button appear on a ` – Voicu Nov 10 '17 at 17:53
1

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.

Scrollwheelie
  • 811
  • 2
  • 9
  • 16
0

Does the fullscreen toggle button show up when you start playing the video?

According to Apple's documentation:

The webkitSupportsFullscreen property is not valid until the movie metadata has loaded. You can detect when the metadata is loaded by installing an event listener for the loadedmetadata event.

It seems there is some support in the video file that needs to be checked for before fullscreen support is enabled in the controls.

When viewing an HTML5 video on both Chrome and Safari, the fullscreen toggle button doesn't appear until the video has started playing.

EDIT: you might be able to get around this behavior by adding preload="metadata" to your video element.

Jeremy White
  • 2,818
  • 6
  • 38
  • 74
  • Thanks, Jeremy. `preload="metadata"` is on. I turned it on when I added the VTT captions. It doesn't seem to make any difference. Just spitballing but does this mean I might need to "preload" it again via JS after the full page loads? Not sure how I'd do that or if it would matter… – Scrollwheelie Jul 25 '16 at 21:42
  • I moved the above to a comment in reply to Jeremy instead of an answer. Durp. – Scrollwheelie Jul 25 '16 at 21:43
  • Jeremy asked if it shows up when the movie starts playing. No, it never shows up. – Scrollwheelie Jul 25 '16 at 21:44