1. Core Concepts
  2. Fullscreen

Core Concepts


In this section, we'll look at how to request and track fullscreen changes.


You can request to enter or exit fullscreen on the <vds-media> element like so:



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`


By setting target to provider, the controller will only request fullscreen on the media provider element, 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:



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

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

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

vds-media[fullscreen] {
  /* fullscreen is active. */

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



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 fullscreenOrientation while the media enters fullscreen, and it will be unlocked while exiting. Read more about the available screen orientation types.


The following events are available for detecting screen orientation changes: