<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.
NOTE: Casting support isn’t available in all browsers. Interacting with these examples may not do anything when support isn’t available.
Default usage
Section titled Default usageCustomize icons
Section titled Customize iconsYou 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”.
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.
Styling with attributes
Section titled Styling with attributesThe <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;
}
Reference
Section titled ReferenceSlots
Section titled SlotsName | 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 trigger exiting casting mode. |
icon |
An element for representing enter and exit states in a single icon |
Attributes
Section titled AttributesName | 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). |
Media UI Attributes
Section titled Media UI Attributes
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. |
CSS Variables
Section titled CSS VariablesName | 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. |