Video

Video primitive with poster image support, aspect-ratio preservation, object-fit scaling, and graceful placeholder fallback when src is missing.

// Plain markup
import { Video } from "@shavin/ui";

Placeholder (no source)

Component Source

{/* No src → a graceful SVG placeholder, sized by ratio */}
<Video ratio="16/9" className="w-64" />

With a source and poster

Component Source

<Video
  src="/hero.mp4"
  poster="/hero-poster.jpg"
  ratio="16/9"
  className="w-64"
/>

Aspect ratios

Component Source

<Video src="/clip.mp4" ratio="1/1" className="w-32" />
<Video src="/clip.mp4" ratio="4/3" className="w-32" />
<Video src="/clip.mp4" ratio="16/9" className="w-32" />

Fit

Component Source

{/* object-fit: cover (default) vs contain */}
<Video src="/tall.mp4" fit="cover" ratio="1/1" className="w-32" />
<Video src="/tall.mp4" fit="contain" ratio="1/1" className="w-32" />

Radius

Component Source

<Video radius="none" ratio="1/1" className="w-24" />
<Video radius="medium" ratio="1/1" className="w-24" />
<Video radius="large" ratio="1/1" className="w-24" />
<Video radius="full" ratio="1/1" className="w-24" />

Concentric radius

Component Source

{/* radius="concentric" auto-resolves the inner
   radius from the container's padding */}
<Card padding="md">
  <Video src="/hero.mp4" poster="/hero.jpg" ratio="16/9" radius="concentric" />
</Card>

With controls (user-playable)

Component Source

{/* controls + no autoplay → user-initiated playback */}
<Video
  src="/demo.mp4"
  poster="/demo.jpg"
  ratio="16/9"
  controls
  autoPlay={false}
  className="w-64"
/>

Props

Prop	Type	Default	Description
src	string	—	Video source URL.
poster	string	—	Poster image URL shown before the video loads/plays.
fit	"cover" \| "contain" \| "fill" \| "none"	cover	Object fit style: "cover", "contain", "fill", "none". Default "cover".
ratio	string	—	CSS aspect-ratio string, e.g. "16/9", "1/1". Reserves space to avoid layout shift.
autoPlay	boolean	true	Autoplay the video (muted is required by browsers for autoplay). Default true.
loop	boolean	true	Loop the video. Default true.
muted	boolean	true	Mute the video. Default true.
controls	boolean	false	Show native browser controls. Default false.
placeholder	React.ReactNode	—	Custom placeholder node shown when src is missing.
radius	"none" \| "small" \| "medium" \| "large" \| "full" \| "inherit" \| "concentric"	"inherit"	—