<media-play-button>

The <media-play-button> component is used to toggle your media playback state.
In simpler terms, it is used to both play and pause your media content.

The contents and behavior of the <media-play-button> will update automatically once your media playback state changes.

  • When your media begins to play, the component will switch to show the contents of its pause slot.
  • When your media is paused, the component will display the contents of its play slot.
<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-play-button></media-play-button>
</media-controller>

You can modify the contents of the <media-play-button> component using slots. This is useful if you’d like to use your own custom play button instead of the default one provided by media-chrome.

Here’s an example of how you can replace the default play and pause icons with the literal words “Play” and “Pause”:

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-play-button>
    <span slot="play">Play</span>
    <span slot="pause">Pause</span>
  </media-play-button>
</media-controller>

The <media-play-button> does not expose any configuration attributes.
However, it will be updated with media state attributes any time your media playback state changes.

You can use these attributes to apply custom styles to your <media-play-button> element under different state conditions:

media-play-button[media-paused] {
  animation: glow 2s;
}
Name Description
play An element shown when the media is paused and pressing the button will start media playback.
pause An element shown when the media is playing and pressing the button will pause media playback.
Name Type Description
disabled boolean The Boolean disabled attribute makes the element not mutable or focusable.
mediacontroller string The element `id` of the media controller to connect to (if not nested within).

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.

Name Type Description
mediapaused boolean Present if the media is paused.
Name Default Description
--media-play-button-display inline-flex display property of button.
--media-primary-color rgb(238 238 238) Default color of text and icon.
--media-secondary-color rgb(20 20 30 / .7) Default color of button background.
--media-text-color var(--media-primary-color, rgb(238 238 238)) color of button text.
--media-icon-color var(--media-primary-color, rgb(238 238 238)) fill color of button icon.
--media-control-display display property of control.
--media-control-background var(--media-secondary-color, rgb(20 20 30 / .7)) background of control.
--media-control-hover-background rgba(50 50 70 / .7) background of control hover state.
--media-control-padding 10px padding of control.
--media-control-height 24px line-height of control.
--media-font var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif) font shorthand property.
--media-font-weight bold font-weight property.
--media-font-family helvetica neue, segoe ui, roboto, arial, sans-serif font-family property.
--media-font-size 14px font-size property.
--media-text-content-height var(--media-control-height, 24px) line-height of button text.
--media-button-icon-width width of button icon.
--media-button-icon-height var(--media-control-height, 24px) height of button icon.
--media-button-icon-transform transform of button icon.
--media-button-icon-transition transition of button icon.