# Video hero

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FSQyf8xfMWnbJxEGKgMiQ%2Fezgif.com-video-to-gif%20(31).gif?alt=media&#x26;token=c7300845-88f2-4876-9338-b94d5eb05cc3" 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](https://docs.foxecom.com/zest-theme/theme-sections/video) 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FofwIpMV9qHbABXokKlOD%2Fimage.png?alt=media&#x26;token=a7427959-0d92-4d61-a076-ed89c6905ef7" 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="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F9TK5EQrAOrNfhfcKwdHI%2Fimage.png?alt=media&#x26;token=47ea748a-763d-41ba-aa85-5a39cbbdc87b" 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 %}