API

Fullscreen

An overview on requesting and tracking fullscreen mode changes.

Requesting fullscreen has similar requirements to autoplay policies. In general, it will not work programatically until the user has interacted with the document first, or the request is in response to a user interaction like clicking or tapping a button. You can request fullscreen changes by using the FullscreenButton, remote control, or via methods on the player instance.

The media remote provides methods for dispatching media-enter-fullscreen-request and media-exit-fullscreen-request request events like so:

The following enterFullscreen() and exitFullscreen() methods are available on the player component instance for requesting fullscreen changes:

By default, calling the enterFullscreen() method will first attempt to use the Fullscreen API so the custom media UI is displayed, otherwise it’ll fallback to the current media provider.

You can specify that you only want to display the provider in fullscreen and not the entire media by specifying the fullscreen target like so:

The following fullscreen properties are available on the media store:

• canFullscreen: Whether fullscreen is supported by the current browser or provider.
• fullscreen: Whether the player is currently in fullscreen mode.

The following media data attributes are available for styling based on the current fullscreen state:

The following events are available for detecting fullscreen changes or errors:

You can specify the preferred fullscreen orientation like so:

This will lock the screen orientation as specified by fullscreenOrientation while the media enters fullscreen, and it will be unlocked while exiting. Keep in mind that this will only work when the Screen Orientation API is available. See the screen orientation page for more information.

You can disable locking the fullscreen orientation to allow the screen rotation to be handled by the user by setting it to none like so: