Getting Started

Installation

Instructions to get your player installed and on-screen.

WARNING

Starting a new project? Use Video.js 10 instead. Vidstack is in security-only maintenance until January 2028, and the teams behind it now work on Video.js 10. Start with the Video.js installation guide, or, for an existing Vidstack player, the migration guide for React or web components and other frameworks. To migrate with a coding agent, paste the prompt from the guide’s AI Quickstart section into it: React · Web components and other frameworks.

1. Select Framework

JavaScript

Angular

React

Svelte

Vue

Solid

Web Components

CDN

2. Select Provider

3. Select Styling

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.