Core Concepts
Fullscreen
In this section, we'll look at how to request and track fullscreen changes.
Requests
You can request to enter or exit fullscreen on the <media-player>
element like so:
Target
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:
By setting target
to provider
, the controller will only request fullscreen on the media provider, meaning your custom UI will not be displayed when in fullscreen.
Media Remote
The media remote provides methods for dispatching media-enter-fullscreen
and media-exit-fullscreen
requests like so:
Styling
The following media attributes are available for styling based on the current fullscreen state:
Events
The following events are available for detecting fullscreen changes or errors:
Screen Orientation
The player uses the native Screen Orientation API to lock the document's orientation. You can specify the preferred fullscreen orientation like so:
This will lock the screen orientation as specified by fullscreen-orientation
while the media enters fullscreen, and it will be unlocked while exiting. Read more about the available screen orientation types.
Events
The following events are available for detecting screen orientation changes: