Skip to content
Video
Section overview
The Video section displays a video that can autoplay or play on click with customizable header content. It supports various layout options including split-view layout.
Common use cases
- Showcasing product demonstrations
- Displaying brand or promotional videos
- Highlighting how-to tutorials
- Creating engaging homepage content
Usage tips
- Use a background image from the video as a placeholder for better initial loading
- Keep videos short and focused for better user engagement
- When using autoplay, consider muting the video by default
- For important content, add a descriptive heading and call-to-action button
Mobile responsiveness considerations
- Video automatically adjusts to smaller screens
- In split layout, the heading and text stack above the video on mobile
- Consider video file size for mobile data usage
Section settings
| Setting | Description |
|---|---|
| Video | The video to display in the section |
| Auto play | Enables automatic playback of the video |
| Heading | Main title text for the section |
| Content | Descriptive text content shown alongside the video |
| Button label | Text shown on the call-to-action button |
| Button URL | Destination URL when the button is clicked |
| Top spacing | Amount of space added above the section (in pixels) |
| Bottom spacing | Amount of space added below the section (in pixels) |
| Color scheme | Controls the background color scheme |
| Custom color | Custom background color when 'Custom' color scheme is selected |
| Text color | Controls the text color appearance |
| Border color | Controls the color of section borders |
| Button color | Controls the styling and color of the button |
| Enable color fade | Enables background color transition when scrolling |
| Border position | Controls where borders appear around the section |
| X alignment | Controls horizontal alignment of section content |
| Enable margin | Adds horizontal margin to the section |
| Enable split | Displays content alongside the video in a split layout |
| Enable split heading | Separates heading from content in the layout |
| Visibility | Controls section visibility across device sizes |