Video

Video shows a video file, or a video from YouTube, Vimeo or Loom. It knows which from src: a file ending in .mp4, .webm, .ogg or .mov plays in the browser’s own player; any other address is embedded.

A video file

A video file, with the browser's controls.

<Video src="/videos/flower.mp4" width="480px" caption="A video file, with the browser's controls." />

A file in your project is a path from the project folder, like an image.

An embedded video

Use the video’s embed address - for YouTube, https://www.youtube.com/embed/<id>, not the watch?v= one:

An embedded YouTube video.

<Video src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="480px" title="A YouTube video" caption="An embedded YouTube video." />

A looping clip

For a short clip that plays like an animated image - a UI interaction, say - turn on autoplay and loop, and turn off controls. A video that plays by itself is always muted, since browsers block autoplay with sound:

<Video src="/videos/clip.mp4" width="320px" autoplay loop controls={false} />

Props

src string required

A video file - a path or URL - or a video’s embed address.

width string default: 100%

The video’s width on a wide screen - any CSS width, like "80%" or "500px".

caption string

Text under the video. With a caption, the video sits in a bordered card.

title string

The video’s name, for screen readers - set it on an embedded video.

controls boolean default: true

The player’s controls. Video files only - an embed shows its own.

autoplay boolean default: false

Plays as soon as the page loads, muted. Video files only.

loop boolean default: false

Starts again at the end. Video files only.

muted boolean default: false

Starts with the sound off. Video files only.