1. Getting Started
  2. Styling

Getting Started

Styling

In this section, we'll get you up and running with our Tailwind CSS plugin.

Why?

If you're a fan of Tailwind CSS like we are, then you really don't want to be forced to create a .css file to handle random outlier cases. It not only slows you down and breaks your flow, but it also goes against all the advantages of using utility classes.

Installation

You can register the plugin by adding the following to tailwind.config.js:

tailwind.config.js
        module.exports = {
  plugins: [require('@vidstack/player/tailwind.cjs')],
};

      

Usage

The <vds-media> element exposes media state as HTML attributes and CSS properties like so:

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

      

If we were to write vanilla CSS to show and hide icons inside a play button, it might look something like this:

          
        
        .play-icon,
.pause-icon {
  opacity: 100;
}

/* Hide play icon when media is _not_ paused. */
vds-media:not([paused]) .play-icon {
  opacity: 0;
}

/* Hide pause icon when media is paused. */
vds-media[paused] .pause-icon {
  opacity: 0;
}

      

Using the Tailwind plugin, we could rewrite it like so:

          
        

Isn't that so much easier to comprehend? That's basically the plugin in a nutshell, we'll leave the rest to your imagination. In the next sections, you'll find out more about each of the variants and CSS variables available when using our plugin.

Media Variants

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

Media CSS Variables

You can take advantage of arbitrary values if you're using Tailwind CSS v3+ and use the following CSS media variables.

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

Media Example

The following example showcases a track with a fill inside indicating the amount of playback time that has passed. When the media is buffering (indicated by the media-waiting variant) we change the fill background color.