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:

        // Accepts `prefer-media`, `media`, `provider`
player.enterFullscreen('provider');

      

# 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:

        media-player[can-fullscreen] {
  /* fullscreen API is available. */
}

media-player:not([can-fullscreen]) {
  /* fullscreen API is _not_ available. */
}

media-player[fullscreen] {
  /* fullscreen is active. */
}

media-player:not([fullscreen]) {
  /* fullscreen is _not_ active. */
}

      

# 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: