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 media controller.

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

# 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[fullscreen] {
}

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

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

      

# Focus

        /* Apply styles when focused via keyboard. */
media-fullscreen-button:focus-visible {
  outline: 1px auto purple;
}

/* Polyfill applies this class. */
media-fullscreen-button.focus-visible {
  outline: 1px auto purple;
}

      

# Custom Icons

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