@vidable/player

Minimalist, unbranded 4K adaptive video player component built for AI vibecoding tools (v0, Replit, Lovable, Claude Code, Codex, Antigravity) and modern web frameworks (Next.js, Vite, Remix, Astro).

Installation

npm install @vidable/player
# or
pnpm add @vidable/player
# or
yarn add @vidable/player

Quick Start (React)

import { VideoPlayer } from '@vidable/player'
import '@vidable/player/dist/index.css'

export default function HeroSection() {
  return (
    <VideoPlayer
      streamUid="988f5432b10322ce837dc16e115d0bea"
      aspectRatio="16:9"
      borderRadius={12}
      controls={true}
      autoplay={false}
    />
  )
}

Props API

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | streamUid | string | — | Video stream UID generated from vidable.app. | | src | string | — | Direct HLS URL (.m3u8) or MP4 URL. | | poster | string | — | Custom poster image URL. | | aspectRatio | '16:9' \| '4:3' \| '1:1' \| '9:16' | '16:9' | Responsive aspect ratio container. | | borderRadius | number \| string | 8 | Border radius in pixels or CSS value. | | autoplay | boolean | false | Autoplay video on mount (muted recommended). | | muted | boolean | false | Mute audio output. | | loop | boolean | false | Loop playback continuously. | | controls | boolean | true | Show clean minimalist controls overlay. | | enableSpeedSelector | boolean | true | Show 0.5x–2x speed selector. | | enablePip | boolean | true | Enable browser Picture-in-Picture. | | startTime | number | 0 | Initial playback start timestamp in seconds. |

License

MIT © vidable.app