Getting Started
Styling
In this section, we'll cover the basics on how you can easily put together a custom UI with Vidstack Player.
Introduction
All UI elements in the library are headless, meaning they contain no styling out of the box. It's up to you how they look, as they only provide some core functionality. For example, the <vds-play-button>
component will dispatch play and pause requests when pressed, but other than that, it is completely blank.
The player exposes media state as attributes and CSS variables on the <vds-media>
element (aka <Media>
component):
You can use the presence and absence of these attributes to style children of the <vds-media>
element with CSS. Here's a quick example where we add a controls container and hide it based on some media state:
[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.
Media CSS Variables
Here's a reference table that displays all the media CSS variables that are set on the <vds-media>
element.