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.

          
1
2
3
4
		    

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

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

          
1
2
3
4
5
6
		    

# Styling

You can override the default styles with CSS like so:

        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

        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