<media-control-bar>

The <media-control-bar> container component is used to make layout and styling of your controls as a “control bar” easier.

Default usage

Section titled Default usage

By default, <media-control-bar> will try to scale down other Media Chrome components if there is not enough room and will grow to the width of the <media-controller>.

<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-seek-backward-button></media-seek-backward-button>
    <media-seek-forward-button></media-seek-forward-button>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
    <media-time-display></media-time-display>
    <media-captions-button></media-captions-button>
    <media-playback-rate-button></media-playback-rate-button>
    <media-pip-button></media-pip-button>
    <media-fullscreen-button></media-fullscreen-button>
    <media-airplay-button></media-airplay-button>
  </media-control-bar>
</media-controller>
Open on CodeSandboxOpen Sandbox

Use with <media-time-range>

Section titled Use with &lt;media-time-range&gt;

<media-control-bar> will expand the <media-time-range> if there is extra space available.

<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-seek-backward-button></media-seek-backward-button>
    <media-seek-forward-button></media-seek-forward-button>
    <media-mute-button></media-mute-button>
    <media-time-display></media-time-display>
    <media-time-range></media-time-range>
  </media-control-bar>
</media-controller>
Open on CodeSandboxOpen Sandbox

Use as separate control bar

Section titled Use as separate control bar

<media-control-bar> can be used as a control bar outside of the <media-controller> by using the mediacontroller attribute.

<div>
  <media-controller id="mc">
    <video
      playsinline muted crossorigin
      slot="media"
      src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    ></video>
  </media-controller>
  <media-control-bar style="width: 100%" mediacontroller="mc">
    <media-play-button></media-play-button>
    <media-seek-backward-button></media-seek-backward-button>
    <media-seek-forward-button></media-seek-forward-button>
    <media-mute-button></media-mute-button>
    <media-time-display></media-time-display>
    <media-time-range></media-time-range>
  </media-control-bar>
</div>
Open on CodeSandboxOpen Sandbox

Reference

Section titled Reference

Attributes

Section titled Attributes
Name Type Description
mediacontroller string The element `id` of the media controller to connect to (if not nested within).

CSS Variables

Section titled CSS Variables
Name Default Description
--media-primary-color rgb(238 238 238) Default color of text and icon.
--media-secondary-color Default color of button background.
--media-text-color var(--media-primary-color, rgb(238 238 238)) color of button text.
--media-control-bar-display inline-flex display property of control bar.
--media-control-display var(--media-control-bar-display, inline-flex) display property of control.