Video
Add a video with playback, aspect-ratio and control settings.
Code name: Video · Category: Media
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use video for a short introduction, service demonstration or explanation that benefits from motion. Give visitors enough context without needing to press play.
In the editor
- Choose the video source.
- Set the aspect ratio and player controls.
- Test playback in preview and provide accessible context or a transcript where needed.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Video src="/defaults/video-default.mp4" playing={false} videoControls={true} aspectRatio="16:9" />Behaviour and limitations
- playing requests playback; browsers and video providers can restrict autoplay.
- Use muted with autoplay where appropriate. videoControls controls the player controls, not the editor UI.
- A video source and a thumbnail are different assets; do not substitute one for the other.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
src | See guidance | "/defaults/video-default.mp4" (renderer) | Video. See the usage notes for this block. |
width | See guidance | Not declared here | width. See the usage notes for this block. Catalog only: verify before use. |
playing | boolean | false (renderer) | Auto play. See the usage notes for this block. |
loop | boolean | false (renderer) | Loop. See the usage notes for this block. |
muted | boolean | true (renderer) | Muted. See the usage notes for this block. |
videoControls | boolean | true (renderer) | Display video controls. See the usage notes for this block. |
aspectRatio | "original", "16:9", "4:3", "1:1", "9:16" | "16:9" (renderer) | Aspect ratio. See the usage notes for this block. |
alt | string | "" (renderer) | Video description. See the usage notes for this block. |
backgroundColor | string | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
align | "left", "center", "right" | "" (renderer) | Align. See the usage notes for this block. |
borderRadius | number | 0 (renderer) | Border Radius. See the usage notes for this block. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "zoom-in" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
css | string | Not declared here | Custom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits. |
