Styling

References

In this section, we've included handy tables that you can use as reference when styiling media elements or components.

Media Attributes

Here's a reference table that displays all the media data attributes that are set on the <media-player> element:

        <!-- Media attributes are reflected by the player. -->
<media-player data-can-play data-paused ...></media-player>

Attribute	Description
`data-autoplay`	Autoplay has successfully started.
`data-autoplay-error`	Autoplay has failed to start.
`data-can-load`	Media can begin loading.
`data-can-play`	Media is ready to be played.
`data-can-fullscreen`	Media fullscreen is available.
`data-ended`	Playback has reached the end.
`data-error`	Issue with media loading/playback.
`data-fullscreen`	Media is in fullscreen mode.
`data-user-idle`	User is not active during playback.
`data-loop`	Media is set to loop back to start on end.
`data-live`	Media is a live stream.
`data-live-edge`	Current time is at the live edge.
`data-muted`	Media is muted.
`data-paused`	Playback is in a paused state.
`data-playing`	Playback has started or resumed.
`data-playsinline`	Media should play inline by default (iOS Safari).
`data-seeking`	Media or user is seeking to new playback position.
`data-started`	Media playback has started.
`data-waiting`	Media is waiting for more data (i.e., buffering).
`data-ios-controls`	iOS media controls are visible.

Here's a reference table that displays all the media CSS variables that are set on the <media-player> element:

        <!-- Media CSS variables are set by the player. -->
<media-player style="--media-current-time: 100; ..."></media-player>

Variable	Description
`--media-buffered`	The latest time in seconds at which the browser has downloaded media.
`--media-current-time`	The current playback time in seconds.
`--media-duration`	The total length of media in seconds.