Video component

Use Video to embed a video file with the browser’s playback controls. Supply a direct HTTPS media URL, rather than a video service’s watch-page URL.

<Video
  src="https://media.example.com/product-walkthrough.mp4"
  width="wide"
  caption="A walkthrough of the page editor"
  pixelWidth={1280}
  pixelHeight={720}
/>

Properties

Property	Type	Default	Description
`src`	String	Required	Direct video URL, such as an MP4 or WebM file. Cloud requires a hosted URL.
`width`	`"regular"`, `"wide"`, or `"full"`	`"regular"`	Layout width.
`caption`	String	None	Plain text below the player.
`title`	String	None	Native player title text.
`pixelWidth`	Positive number	Inferred when available	Video width in pixels for its dimensions and aspect ratio.
`pixelHeight`	Positive number	Inferred when available	Video height in pixels for its dimensions and aspect ratio.

Playback controls are always enabled. Autoplay, looping, muted playback, and poster images are not configurable properties of this component.

Use the visual editor

Use an absolute HTTPS URL for video in the web editor and on Lettercamp Cloud. For CLI previews and standalone builds, you can put video in public/ and use a path such as /video/walkthrough.mp4. Cloud does not copy these files, and CLI deployment does not upload video automatically. Insert a Video block to upload a video or paste a direct URL. Edit the caption below the player and use the width buttons to choose Regular, Wide, or Full. The same settings are preserved in component source.

Getting started

Writing

Content components

Design

Site settings

Custom components

Publishing

CLI

Properties

Use the visual editor