Video player
Wrapper over the native <video> element with styled play / pause / seek / mute controls. Pass a YouTube URL and the component swaps to a facade + iframe automatically — click the poster to load the embed. The preview image is fully configurable via the posterprop (YouTube's maxres thumbnail is used as default for YouTube URLs).
YouTube — default thumbnail
No posterprop → the player shows YouTube's own maxres thumbnail automatically.
YouTube — custom poster
Same YouTube URL, but a poster prop overrides the preview image. Drop in your own cover (JPG, PNG, SVG, or any URL) to keep the player on-brand before playback.
Native mp4
0:00 / 0:00
Usage
TSX
import { VideoPlayer } from "kora-ui/client";
// YouTube — any watch/shorts/youtu.be URL works
<VideoPlayer
src="https://www.youtube.com/watch?v=JmcA9LIIXWw"
className="aspect-video w-full"
/>
// YouTube with a custom preview image
<VideoPlayer
src="https://www.youtube.com/watch?v=JmcA9LIIXWw"
poster="/my-cover.jpg"
className="aspect-video w-full"
/>
// Native mp4 / webm
<VideoPlayer
src="/videos/intro.mp4"
poster="/videos/intro.jpg"
accent="var(--color-pink-500)"
className="aspect-video w-full"
/>