<media-cast-button>

The <media-cast-button> component is used to bring up the Cast menu and select playback on a Chromecast-enabled device and to stop casting once started.

The contents of the <media-cast-button> will update based on the availability of casting support and current casting state.

  • When the media is not currently casting, the enter slot will be shown.
  • When the media is currently casting, the exit slot will be shown.

Requires the <castable-video> element or a custom media element that implements the CastableMedia interface like <mux-video>.

NOTE: Google Cast support is only available in Chromium browsers. Interacting with these examples may not do anything when support isn’t available.

<media-controller>
  <castable-video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></castable-video>
  <media-cast-button></media-cast-button>
</media-controller>

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

Here’s an example of how you can replace the default icons with the words “Cast” and “Exit”.

<media-controller>
  <castable-video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></castable-video>
  <media-cast-button>
    <span slot="enter">Cast</span>
    <span slot="exit">Exit</span>
  </media-cast-button>
</media-controller>

Alternatively, if you would like to represent both states 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 casting state.

.my-icon {
  border-radius: 4px;
  outline: 2px solid #fff;
  padding: 0 6px;
  transition: all .4s;
}

media-cast-button[mediaiscasting] .cast-icon {
  outline: 2px solid green;
  color: green;
}

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

You can use these attributes to style the button. For example, if casting is unavailable, hide the button:

media-cast-button[mediacastunavailable] {
  display: none;
}

Or set the background to blue, if the media is now casting:

media-cast-button[mediaiscasting] {
  --media-control-background: blue;
}
Name Description
enter An element shown when the media is not in casting mode and pressing the button will open the Cast menu.
exit An element shown when the media is in casting mode and pressing the button will open the Cast menu.
icon An element for representing enter and exit 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).

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
mediacastunavailable (unavailable|unsupported) Set if casting is unavailable.
mediaiscasting boolean Present if the media is casting.
Name Default Description
--media-cast-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.