UI

Fullscreen Button

This component is used to enter and exit fullscreen.

# Import

        import '@vidstack/player/define/vds-fullscreen-button.js';

      

        <script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-fullscreen-button.js"
></script>

      

# Usage

The <vds-fullscreen-button> component will toggle the fullscreen state of media as it's pressed by dispatching a vds-enter-fullscreen-request, and vds-exit-fullscreen-request event to the media controller.

# Fullscreen Target

By default, the <vds-fullscreen-button> component will fire a request to enter fullscreen on the current media (i.e., <vds-media>). The request handler will naturally fallback to the current media provider if the native Fullscreen API is not available.

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

# Avoiding Double Controls (iOS)

The native media controls can not be hidden on iOS when in fullscreen mode even if the controls property is not set. We recommend hiding them to avoid double controls by using the hide-ui attribute on the vds-media element.

        /* Avoid double controls on iOS when in fullscreen. */
vds-media[hide-ui] .media-controls {
  opacity: 0;
  visibility: hidden;
}

      

# Styling

Here's a simple styled <vds-fullscreen-button> example containing a enter and exit icons:

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17