Web features explorer

Fullscreen API

Limited availability

The fullscreen API makes a specific element fill the whole screen and hides most browser UI.

Browser support (view on caniuse.com)

  • Chrome 71 Released on 2018-12-04
  • Chrome Android 71 Released on 2018-12-04
  • Edge 79 Released on 2020-01-15
  • Firefox 64 Released on 2018-12-11
  • Firefox for Android 64 Released on 2018-12-11
  • Safari 16.4 Released on 2023-03-27
  • Safari on iOS Not supported

Baseline availability blocked since March 2023 by Safari (40 months)

👍
8

Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.

MDN documentation

Specifications

Web Platform Tests (WPT)

View the latest WPT test results for this feature

Developer use cases

  • I want to be able to support an accessible video-watching experience with my own custom video player implementations. Currently, the iOS `<video />` element experience is all or nothing: 1. Omit `playsinline` and have iOS inject its own behaviour, which results in duplicate video players (iOS's on top of mine, or mine on top of iOS, hard to tell) 2. Include `playsinline` and then not being able to use the fullscreen video experience 3. Most designers do not like the appearance of the default closed captions experience, which have very limited CSS support, requiring developers to implement custom ones The defaults that all browsers provide is not consistent, and designers want full control. Allowing us to request fullscreen on a `<div />` will give us the power we need to design consistent fullscreen experiences cross-platform. I want to be able to support an accessible video-watching experience with my own custom video player implementations. Currently, the iOS `<video />` element experience is all or nothing: 1. Omit `playsinline` and have iOS inject its own behaviour, which results in duplicate video players (iOS's on top of mine, or mine on top of iOS, hard to tell) 2. Include `playsinline` and then not being able to use the fullscreen video experience 3. Most designers do not like the appearance of the default closed captions experience, which have very limited CSS support, requiring developers to implement custom ones The defaults that all browsers provide is not consistent, and designers want full control. Allowing us to request fullscreen on a `<div />` will give us the power we need to design consistent fullscreen experiences cross-platform. [see original comment]

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist