Video

A product video with light and dark sources.

import { Video } from 'components/UI/Video'

Product demo

The notebook clip follows the site theme.

Open a notebook beside your current page.

Set autoPlay={false} to show the poster and native controls. The video starts when the user presses play.

Press play to start the demo.

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Use Video for video files. For Wistia, use WistiaVideo.
Give every video a label. For speech, add caption tracks.
Set darkSrc when the clip shows UI, so it matches dark mode.
Autoplay clips are muted and loop. Autoplay is off for users who prefer reduced motion.

Video is a site component. It accepts native video props and forwards its ref to the video element.

Prop	Type	Default	Description
src	string	–	Required. The direct video URL for light mode and the fallback for dark mode.
darkSrc	string	–	The direct video URL for dark mode.
poster / darkPoster	string	–	Poster images. Dark mode uses darkPoster when supplied.
label	string	–	Required. The accessible name of the video.
caption	ReactNode	–	Visible text below the video. Also describes the video for assistive technology.
frame	boolean	true	Adds the shared glass surface, border, and shadow.
loading	'lazy' \| 'eager'	'lazy'	Sets when the video receives its source.
autoPlay	boolean	true	Starts playback near the viewport unless reduced motion is active.
loop	boolean	autoPlay	Repeats the clip. Set false to play it once.
muted / playsInline	boolean	true	Mutes sound and permits inline playback.
controls	boolean	!autoPlay \|\| reduced motion	Overrides native control visibility. Autoplay clips without native controls show a play/pause button unless reduced motion is active.
preload	'none' \| 'metadata' \| 'auto'	'none'	Sets the browser preload hint after the source attaches.
className / wrapperClassName	string	–	Styles the video or its outer figure.
children	ReactNode	–	Native track elements for timed captions or descriptions. Do not add source elements; use src and darkSrc.