<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 and behavior of the <media-cast-button> will update automatically 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.

NOTE: Casting support isn’t available in all browsers

<media-controller>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  ></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 Cast button instead of the default one provided by media-chrome.

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

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

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;
}

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.