Video

Embed a clip with lazy load, loop, and a compact control bar.

Default

src is required. lazy, loop, and controls default to true. Pass width and height so the frame keeps ratio before metadata arrives.

0:000:00


        
          1
          
          <Video src="https://k2mkucxia43oc7fa.public.blob.vercel-storage.com/front/geist-font-page/videos/dark/geist.mp4" :width="480" :height="270" :lazy="false" />

No loop

0:000:00


        
          1
          
          <Video src="https://k2mkucxia43oc7fa.public.blob.vercel-storage.com/front/geist-font-page/videos/dark/geist.mp4" :width="480" :height="270" :lazy="false" :loop="false" />

No controls

Without controls the clip is decorative: muted, autoplay, no chrome.


        
          1
          
          <Video src="https://k2mkucxia43oc7fa.public.blob.vercel-storage.com/front/geist-font-page/videos/dark/geist.mp4" :width="480" :height="270" :lazy="false" :controls="false" />

Best practices

Keep lazy on in product views so the file waits for the viewport. Docs previews set it false so the first paint is a frame, not a hole.
Set width and height together. The wrapper uses them as an aspect-ratio lock.
Use controls when the clip is the content. Drop them for ambient loops in a hero or empty state.
Pass poster when the first frame is black or a flash. Do not restyle the built-in bar.
This is not a player product. Long-form or chapters stay on the host page, not inside Video.