A polished, customizable React video player with play/pause, scrubbable progress, volume, playback speed, captions toggle, picture-in-picture, fullscreen and an optional 'Watch on YouTube' button.
Documentation
Install via the shadcn CLI to copy the component source directly into your project, or use the NPM package.
npx shadcn@latest add https://loomix.harshsingh.me/r/loomix-player.json
npm install loomix
Pass a video source and Loomix renders a complete player. Apply any Tailwind classes to size and position it.
import { LoomixPlayer } from "@/components/ui/loomix-player";
export default function Demo() {
return (
<LoomixPlayer
src="https://cdn.harshsingh.me/croatia.webm"
youtubeUrl="https://youtube.com/watch?v=..."
className="aspect-video w-full max-w-4xl"
/>
);
}
| Prop | Type | Description |
|---|---|---|
src | string | Video source URL. Required. |
poster | string | Image shown before playback begins. |
youtubeUrl | string | When set, a 'Watch on YouTube' button is shown in the control bar. |
captions | LoomixCaption[] | Caption / subtitle tracks. When provided, the CC toggle appears. |
autoPlay | boolean | Auto-play on mount. Defaults to false. |
muted | boolean | Start muted. Defaults to false. |
loop | boolean | Loop the video. Defaults to false. |
disablePictureInPicture | boolean | Hide the picture-in-picture button. |
ariaLabel | string | Accessible label applied to the player root. |
className | string | Class name applied to the player root. |
videoClassName | string | Class name applied to the underlying <video> element. |
onPlayingChange | (isPlaying: boolean) => void | Called whenever play / pause state changes. |
| Keys | Action |
|---|---|
Space / K | Play / pause |
M | Mute / unmute |
F | Toggle fullscreen |
C | Toggle captions |
Left / Right | Seek -/+ 5s |
Up / Down | Volume -/+ 5% |
More from this creator