1. Styling
  2. References

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>

      
AttributeDescription
data-autoplayAutoplay has successfully started.
data-autoplay-errorAutoplay has failed to start.
data-can-loadMedia can begin loading.
data-can-playMedia is ready to be played.
data-can-fullscreenMedia fullscreen is available.
data-endedPlayback has reached the end.
data-errorIssue with media loading/playback.
data-fullscreenMedia is in fullscreen mode.
data-user-idleUser is not active during playback.
data-loopMedia is set to loop back to start on end.
data-liveMedia is a live stream.
data-live-edgeCurrent time is at the live edge.
data-mutedMedia is muted.
data-pausedPlayback is in a paused state.
data-playingPlayback has started or resumed.
data-playsinlineMedia should play inline by default (iOS Safari).
data-seekingMedia or user is seeking to new playback position.
data-startedMedia playback has started.
data-waitingMedia is waiting for more data (i.e., buffering).
data-ios-controlsiOS media controls are visible.

Media CSS Variables

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>

      
VariableDescription
--media-bufferedThe latest time in seconds at which the browser has downloaded media.
--media-current-timeThe current playback time in seconds.
--media-durationThe total length of media in seconds.