Video

An embedded player surface with poster and controls.

Default

1:24 / 3:58

<div class="relative aspect-video overflow-hidden rounded-xl border border-border bg-bg-elevated">
  <button class="absolute inset-0 m-auto flex size-12 items-center justify-center rounded-full bg-bg-primary/80">
    <svg …play icon… />
  </button>
  <div class="absolute inset-x-0 bottom-0 flex items-center gap-3 px-4 py-3">
    <div class="h-0.5 flex-1 rounded-full bg-border">
      <div class="h-full w-[35%] rounded-full bg-accent"></div>
    </div>
    <span class="font-mono text-xs text-text-secondary">1:24 / 3:58</span>
  </div>
</div>

No controls

autoplay · no chrome

<video src="/demo.mp4" autoplay muted playsinline className="aspect-video w-full rounded-xl" />

No controls drops the controls attribute so the player shows no chrome — used for ambient / background clips (pair with autoplay muted loop). No loop simply omits loop, so the clip plays once and stops on its last frame.

Markdown for agents: /design/video.md · spec: /design.md