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:
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. |
Media CSS Variables
Here's a reference table that displays all the media CSS variables that are set on the <media-player>
element:
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. |
Previous
<-
Tailwind
Next
Player
->