Menu

1 / 2

I shipped a video player to npm — twice. What I learned about scoped CSS, "use client", and Nuxt modules.

DEV Community·Abdullah Al Fahad·6 months ago
#qQWkZXrE
#decision#app#whats#player#nuxt
Reading 0:00
15s threshold

A small, HLS-capable video player for React and Vue, with zero global CSS side-effects. Built in the open. Try it: https://video-player-playgraound.vercel.app/

The annoying gap

I needed an embeddable video player for a side project. Requirements were boring:

HLS streaming ( .m3u8 )

A clean play button overlay, optional close button, optional desktop/mobile aspect-ratio toggle

Fits the design system without fighting it

Works in Next.js App Router without a "ReactServerComponentsError" headache

Works in Nuxt 3 without manually wiring a plugin

I tried the popular options. Each was almost right.

react-player is mature but the API is geared toward "give me a URL and a giant control bar."

video.js is overkill for an embed and ships a chunk of theme CSS that fights Tailwind.

plyr , vidstack — beautiful, but either too heavy or too opinionated about styling.

The thing that kept biting me was CSS bleed .…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.