1. Buttons
  2. Fullscreen Button

Buttons

Fullscreen Button

This component is used to enter and exit fullscreen.

Usage

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

          
        
DANGER

The aria-hidden='true' attribute will be present on this element in the event fullscreen cannot be requested (not supported by environment or provider). The button's display property will be set to none, so it'll be removed from the layout; therefore, you should account for the button not being displayed in your design.

Fullscreen Target

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

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

          
        
WARNING

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.

Key Shortcuts

Keyboard shortcuts can be specified either through the global key shortcuts config, or on the component like so:

          
        

👉 See the aria-keyshortcuts docs for more information.

Custom Icons

Here's an example containing a custom enter and exit icon:

          
        

Tooltips

Tooltips can be provided like so:

          
        

Styling

You can override the default styles with CSS like so:

css
        media-fullscreen-button {
  color: pink;
  transition: opacity 0.2s ease-in;
}

/* Apply styles when media is fullscreened. */
media-fullscreen-button[data-fullscreen] {
}

/* Apply styles when media is _not_ fullscreened. */
media-fullscreen-button:not([data-fullscreen]) {
}

/* Apply styles when fullscreen is not supported. */
media-fullscreen-button[aria-hidden='true'] {
}

/* Style default icons. */
media-fullscreen-button svg[slot='enter'] {
}
media-fullscreen-button svg[slot='exit'] {
}

      

Focus

css
        media-fullscreen-button {
  /* box shadow */
  --media-focus-ring: 0 0 0 4px rgb(78 156 246);
}

/* Apply styles when focused via keyboard. */
media-fullscreen-button[data-focus] {
}

      

CSS Variables

See the toggle button CSS variables for simple customization of the default button and tooltip styles.

Tailwind

The following is a headless example using Tailwind:

          
        

Tooltips

The following extends the example above with tooltips:

          
        

Component API

Props

Name Type

target

MediaFullscreenRequestTarget

disabled

boolean

defaultAppearance

boolean

defaultPressed

boolean

Events

Name Type
Name Description

enter

Used to override the default enter fullscreen icon.

exit

Used to override the default exit fullscreen icon.

Name Type
Name Description

Instance Props

Name Type

pressed

readonly boolean

Instance Methods

Name Type