# 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                |