<media-mute-button>

The <media-mute-button> component is used to toggle the sound of the media. The icon will display whether sound is enabled and the general volume level.

The content of the <media-mute-button> will update based on the audio volume.

  • When the volume is off, the component will display the contents of the off slot.
  • When the volume is low, 0-50%, the component will display the contents of the low slot.
  • When the volume is medium, 50-75%, the component will display the contents of the medium slot.
  • When the volume is high, 75-100%, the component will display the contents of the high slot.
<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
  </video>
  <media-control-bar>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
  </media-control-bar>
</media-controller>

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

Here’s an example of how you can replace the volume levels with the words that correspond to the level.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
  </video>
  <media-control-bar>
    <media-volume-range></media-volume-range>
    <media-mute-button>
      <span slot="high">High</span>
      <span slot="medium">Medium</span>
      <span slot="low">Low</span>
      <span slot="off">Off</span>
    </media-mute-button>
  </media-control-bar>
</media-controller>

Alternatively, if you would like to represent all of the volume levels using a single element you could use the icon slot instead. This is useful for creating an animated icon that transitions between states. Here’s a basic example that uses CSS to change an element based on the volume level.

.my-icon {
  border-radius: 50%;
  height: 100%;
  width: 24px;
  background: red;
  transition: background .4s;
}
media-mute-button[mediavolumelevel='low'] .my-icon {
  background: lightyellow;
}
media-mute-button[mediavolumelevel='medium'] .my-icon {
  background: lightblue;
}
media-mute-button[mediavolumelevel='high'] .my-icon {
  background: lightgreen;
}

The <media-mute-button> doesn’t expose any configuration attributes. However, it will be updated with Media UI Attributes any time the volume level changes.

You can use these attributes to style the button. For example, turn the background color red when the media is muted.

media-mute-button[mediavolumelevel="off"] {
  --media-control-background: red;
}
Name Description
off An element shown when the media is muted or the media’s volume is 0.
low An element shown when the media’s volume is “low” (less than 50% / 0.5).
medium An element shown when the media’s volume is “medium” (between 50% / 0.5 and 75% / 0.75).
high An element shown when the media’s volume is “high” (75% / 0.75 or greater).
icon An element for representing all states in a single icon
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).
tooltipplacement ('top'|'right'|'bottom'|'left'|'none') The placement of the tooltip, defaults to "top"
notooltip boolean Hides the tooltip if this attribute is present

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
mediavolumelevel string Set to the media volume level.
Name Default Description
--media-mute-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.