Looking for the old docs? Go here

Getting Started

JavaScript Installation Guide

Instructions to get your player installed and on-screen using JavaScript.

JavaScript
Angular
React
Svelte
Vue
Solid
Web Components
CDN
Audio
Video
HLS
DASH
YouTube
Vimeo
Remotion
A layout refers to the arrangement and presentation of various player components. The CSS and Tailwind CSS options below are if you want to style components from scratch and build your own layout. The Default Theme option is if you want to build your own layout on top of our component styles. Finally, the Default and Plyr layouts are our production-ready templates to get you up and running quickly.

CSS
Default Theme
Default Layout
Plyr Layout
Tailwind CSS
NPM
CDN
terminal
    
    

Ensure the following browser support table is suitable for your application. We’ve built the library for the modern web; thus, we try to avoid bloated polyfills and outdated environments as much as possible. At the moment, we only support browsers that fully implement the Custom Elements V1 spec.

INFO

We support at minimum ~94.18% of users tracked on caniuse.

js
    
    
player.js
    
    

The target config option is a target element which can be a CSS string selector or a HTMLElement. The target can be any element but if it’s a <audio>, <video>, or <iframe> element it will be replaced and enhanced (i.e., progressive enhancement).

    
    
    
    

Props can also be set on the target element using data attributes like so:

    
    

Lastly, remember you’re not alone. You can reach out for help or to talk with other developers using Vidstack: