> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/video-hero.md).

# Video hero

<figure><img src="/files/MVGsrTlil3qOQSCpan0K" alt=""><figcaption></figcaption></figure>

The **Video hero** section displays an auto-playing video (without sound) to add dynamism to your page.

If you want to add a Vimeo or YouTube video, which includes sound, you should use the [Video section](/zest-theme/theme-sections/video.md) instead.

## How to add a Video hero section to your Shopify store

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)**, click **Add section**
2. Locate **Hero video**
3. Make necessary changes
4. **Save.**
   {% endhint %}

## How to edit a Video hero section

### Section settings

#### Video settings

* **Video type**: Choose `Shopify-hosted` (for autoplay and mute support) or `External URL` (YouTube/Vimeo).
* **Shopify-hosted video**: Upload a .mp4 file directly from your Files.
* **External video URL**: Paste a YouTube or Vimeo link.

{% hint style="info" %}
**🚀 For autoplay + mute:**

Use a **Shopify-hosted video** to ensure the video starts automatically without sound. Most modern browsers block autoplay with sound enabled.
{% endhint %}

#### Visual settings

* **Image overlay opacity**: Add a dark or light overlay to improve text contrast (0-100%).
* **Banner height**: Auto / Small / Medium / Large.
* **Vertical content padding**: Add spacing above and below the content.
* **Text color**: Set the color of your overlay text.

<figure><img src="/files/CALeDaNdiBNZrGZo2aiJ" alt=""><figcaption></figcaption></figure>

#### Desktop and mobile content position settings

* **Desktop content alignment**: Left / Center / Right.
* **Desktop content alignment**: Left / Center / Right.
* **Mobile layout**: Adjust banner height and content position for smaller screens.

<figure><img src="/files/ZbjbmdpG0G3UXSo3DXXb" alt=""><figcaption></figcaption></figure>

### Block settings

You can add the following blocks to your Video hero:

<table data-header-hidden><thead><tr><th width="179.88888549804688">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Main headline (large text)</td></tr><tr><td>Subheading</td><td>Optional secondary headline</td></tr><tr><td>Text</td><td>Supporting paragraph or message</td></tr><tr><td>Button</td><td>CTA button linking to a page or product</td></tr></tbody></table>

{% hint style="success" %}
:bulb:Pro tips:

* Compress your video before uploading to ensure faster load time.
* Keep videos short (10-15 seconds) to minimize performance impact.
* Pair video with a strong CTA to drive conversions.
  {% endhint %}