1. Buttons
  2. Play Button

Buttons

Play Button

This component is used to play and pause media.

Usage

The <media-play-button> component will toggle the paused state of media as it's pressed by dispatching a media-play-request, and media-pause-request event to the media controller.

Styling

You can override the default styles with CSS like so:

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

/* Apply styles when media is paused. */
media-play-button[paused] {
}

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

/* Style default icons. */
media-play-button [slot='play'] {
}
media-play-button [slot='pause'] {
}

Focus

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

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

Custom Icons

Here's an example containing a custom play and pause icon:
Previous <- Toggle Button
Next Mute Button ->