Fixing web video

Production-ready players in minutes.

2025-11-29

The default HTML5 <video> tag is ugly and inconsistent across browsers. Building a custom player from scratch is a trap—you spend weeks fighting CSS and accessibility edge cases instead of shipping features.

Most libraries are bloated legacy code from the jQuery era.

“Stop reinventing the wheel. Just play the video.”

Enter Vidstack

Vidstack is what modern media on the web should look like.

It’s a set of building blocks for standardizing the video experience. Whether you are streaming HLS, rendering a local file, or embedding YouTube, the API and the UI remain consistent.

Why use it

It’s framework-agnostic (React, Svelte, Vue, Solid) and lightweight. It handles the boring stuff so you don’t have to:

• Unified API: Treat YouTube, Vimeo, and HLS exactly the same.
• A11y: Fully accessible out of the box.
• Styling: Tailwind CSS support via data attributes.

Usage

Install it, import the styles, and drop the component.

import { MediaPlayer, MediaProvider } from '@vidstack/react';
import '@vidstack/react/player/styles/default/theme.css';

<MediaPlayer title="Sprite Fight" src="youtube/_cMxraX_5RE">
  <MediaProvider />
</MediaPlayer>;

It looks clean, it loads fast, and it doesn’t fight you.