Mux Player API Reference

Attributes

Methods

Properties

Events

<mux-player> has a number of events for media loading, playback, and the player itself. Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of <mux-player>.

CSS Variables

This is the list of CSS variables for showing/hiding specific controls.

mux-player {
  /* Hide all controls at once */
  --controls: none;

  /* Target all sections by excluding the section prefix */
  --play-button: none;
  --live-button: none;
  --seek-backward-button: none;
  --seek-forward-button: none;
  --mute-button: none;
  --captions-button: none;
  --airplay-button: none;
  --pip-button: none;
  --fullscreen-button: none;
  --cast-button: none;
  --playback-rate-button: none;
  --volume-range: none;
  --time-range: none;
  --time-display: none;
  --title-display: none;
  --duration-display: none;
}

Each of the above can be paired with a prefix for top, center, bottom

mux-player {
  /* Target a specific section by prefixing the CSS var with (top|center|bottom) */
  --center-controls: none;
  --bottom-play-button: none;
}

Other CSS variables:

mux-player {
  /* The controls backdrop color */
  --controls-backdrop-color: rgb(0 0 0 / 0%);

  /*
   * Controls how the media is sized and positioned inside of the <video> element
   * Supports everything the standard CSS properties support
   */
  --media-object-size: cover;
  --media-object-position: center;
}

Turning this off completely has implications on the accessibility of the controls as they may not meet the contrast ratio requirements for WCAG 2.1 without it.

CSS Parts

Mux Player uses a shadow DOM to encapsulate its styles and behaviors. As a result, it's not possible to target its internals with the usual CSS selectors. Instead, some components expose parts that can be targeted with the CSS part selector, or ::part().

<style>
  mux-player::part(center play button) {
    display: none;
  }
</style>
<mux-player playback-id="DS00Spx1CV902MCtPj5WknGlR102V5HFkDe"></mux-player>

Supported parts: top, center, bottom, layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer, poster, live, play, button, seek-backward, seek-forward, mute, captions, airplay, pip, fullscreen, cast, playback-rate, volume, range, time, display, video

CSS parts allow you to style each part individually with a selector like ::part(center play button) or target multiple elements if the part is assigned to multiple elements internally, usage ::part(button). Every CSS property can be declared in the selector, this makes it a very powerful API.

Slots

Mux player can accept a slotted element as a poster image. The HTML would look similar to the following snippet:

<mux-player playback-id="VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA">
  <img slot="poster" src="https://image.mux.com/VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA/thumbnail.webp">
</mux-player>

The markup is more verbose but it comes with some benefits:

• The poster image loads faster as it's picked up by the browser earlier.
• Allows you to use responsive images with the img srcset attribute.