1. Styling
  2. Basics

Styling

Basics

In this section, we'll cover the basics on how you can style elements with CSS based on specific media states.

Introduction

The player exposes media state as attributes and CSS variables on the <vds-media> element:

        <vds-media
  paused
  seeking
  waiting
  can-load
  can-play
  ...
  style="--media-current-time: 500; --media-duration: 1000; ..."
>
  <!-- ... -->
</vds-media>

      

You can use the presence and absence of these attributes to style children of the <vds-media> element with CSS. Here's a few simple examples:

player.css
        /* Apply styles to .foo class when media is paused. */
vds-media[paused] .foo {
}

/* Apply styles to .bar class when media is _not_ paused. */
vds-media:not([paused]) .bar {
}

/** Scale the .baz class based on the % of playback progress. */
.baz {
  transform-origin: left;
  transform: scaleX(calc(var(--media-current-time) / var(--media-duration)));
  will-change: transform;
}

      

[attr] selects elements based on the presence or value of an attribute, and the :not() pseudo-class represents elements that do not match a list of selectors. We can combine these to create powerful selectors based on the media state being exposed and updated on the <vds-media> element.

Media Attributes

Here's a reference table that displays all the media attributes that are set on the <vds-media> element.

AttributeDescription
autoplayAutoplay has successfully started.
autoplay-errorAutoplay has failed to start.
can-loadMedia can begin loading.
can-playMedia is ready to be played.
can-fullscreenMedia fullscreen is available.
endedPlayback has reached the end.
errorIssue with media loading/playback.
fullscreenMedia is in fullscreen mode.
user-idleUser is not active during playback.
loopMedia is set to loop back to start on end.
mutedMedia is muted.
pausedPlayback is in a paused state.
playingPlayback has started or resumed.
playsinlineMedia should play inline by default (iOS Safari).
seekingMedia or user is seeking to new playback position.
startedMedia playback has started.
waitingMedia is waiting for more data (i.e., buffering).
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 <vds-media> element.

VariableDescription
--media-buffered-amountThe amount of media that has buffered in seconds (0 -> duration).
--media-current-timeThe current playback time in seconds (0 -> duration).
--media-durationThe total length of media in seconds.
--media-seekable-amountThe amount of media that is seekable in seconds (0 -> duration).