Video

Overview

A customizable video block component that supports both native and custom video controls. Provides flexible styling options including color schemes, button styles, and layout controls. Supports responsive design with mobile/desktop visibility options and customizable width and alignment.

Common use cases

• Embed promotional videos on homepage

• Showcase product demonstrations

• Display brand storytelling content

• Create engaging video backgrounds

• Add instructional or educational videos

Compatible blocks

The following blocks can be nested within this block:

• Container

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals visibility settings	Checkbox (default: false)

Content

Setting	Description	Options
Video	The video file to display	Video picker
Autoplay video	Automatically plays the video when loaded	Checkbox (default: true)
Loop video	Restarts video when it ends	Checkbox (default: true)
Default video controls	Shows native browser video controls	Checkbox (default: false)
Custom video controls	Shows custom branded play/pause controls	Checkbox (default: true)

Spacing

Setting	Description	Options
Enable horizontal padding	Adds horizontal padding inside the container	Checkbox (default: false)
Enable top padding	Adds top padding	Checkbox (default: false)
Enable bottom padding	Adds bottom padding	Checkbox (default: false)

Color

Setting	Description	Options
Color scheme	Controls the background color scheme	• Body • Neutral • Accent 1 (default) • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur
Border color	Controls the border color	• Subtle (default) • Strong • None

Style

Setting	Description	Options
Width	Controls the width of the video container	5 - 100 % (default: 100)
Minimum width	Minimum width of the video container	5 - 500 px (default: 500)
Border position	Controls where borders appear on the video	• None (default) • Top • Bottom • Left • Right • Top and bottom • Left and right • All
Radius	Controls the border radius	• None • Default (default) • Sm • Md • Lg • Xl • 2xl • Full

Layout

Setting	Description	Options
Horizontal alignment	Controls horizontal alignment of the video	• Left (default) • Center • Right

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on