# Video hero
Add the **Video hero** section to show a full-width autoplaying video (without sound), uploaded as a .mp4 file to your Shopify files.
> If you want to add a Vimeo or YouTube video (with sound), you can use the [Video section](/spark/pages/theme-sections/video.md).
## Set up section
Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.
{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/spark/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/spark/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% endhint %}
STEPS
In your theme editor (**Customize**):
1. Select a **Template** to edit from the dropdown menu in the top bar.
> Learn how to use templates in our [Templates guide](/spark/general/editing-themes/using-templates.md).
2. Under **Template**, click **(+) Add section** and select **Video hero**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.
### Add video file
The **Video hero** section requires an **`.mp4`** that's been uploaded to **Content > Files** in your Shopify admin. For the best experience, we strongly recommend using a 5 to 10 second video under 10MB.
> **Note |** The autoplay video does not play audio. To embed a video from YouTube or Vimeo with audio, see the [Video section](/spark/pages/theme-sections/video.md).
| File Format | .mp4 video (required) |
| ----------- | ---------------------------- |
| File size | Maximum 10MB (recommended) |
| Duration | 5 - 10 seconds (recommended) |
STEPS
In your **Shopify admin**:
1. Go to **Content > Files** to open your [Shopify files](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).
2. Click the **Upload files** button to add your **`.mp4`** file from your computer.
3. Once your file has been processed, click the **Link icon** next to the file to copy the *URL*.
> You may need to refresh the page for your file to appear.
In the theme editor (**Customize**):
1. Click the **Video hero** section to open the settings.
2. Paste the link into the **Video link** field. Click on the the link that appears in the results above.
3. Click **Save**.
## Add s**ection headings**
Edit the **Heading** and **Subheading** to overlay the video before playing. The section headings are included as blocks nested within the section.
STEPS
In your theme editor (**Customize**):
1. Click the **Title** block (”Rich text”) to open the settings.
2. Change the **Heading** text to display as a section title.
> Increase or decrease the **Heading size** using the slider.
> Use the **Max width of text** slider to control the maximum width of the heading.
3. Click the **Subheading** block to open the settings.
> Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
> Use the **Max width of text** slider to control the maximum width of the rich text. Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
4. Click **Save**.
## Section style
You can adjust the overall height of the video for both desktop and mobile, change the section colors, and choose where to position the headings and button.
The **Video hero** section settings apply to the entire section.
STEPS
In your theme editor (**Customize**):
1. Click the **Video hero** section to open the settings.
2. Adjust the overall **Height** and **Mobile height** of the video using the slider.
> Choose between *50%* and *100%* of the maximum height of your video.
3. Select an **Image fallback** to display in case the video does not load.
> We recommend using a still image from the video.
4. Use the **Text alignment** dropdown to change the position of your headings and button on top of your video.
5. Adjust the **Text shadow amount** using the slider.
> Text shadow can add contrast to make your headings readable.
6. Change the **Color** for the **Text**, **Button background**, and **Button text**.
7. (*Optional*.) Select an **Overlay color** to display overtop of the video and adjust the **Overlay opacity** using the slider.
> The **Overlay** lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.
> Set the opacity to **`0%`** to turn off the overlay color; set it to **`100%`** to create a solid color block with no image.
8. (*Optional*.) Click the **Overlay gradient** option to add a color overlay that fades across a range of hues.
> You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more
9. Click **Save**.
## Settings reference
Click on the section to find the following settings:
| Setting | Description |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Height | Use the slider to set the height of the video as a percentage of the maximum height. |
| Mobile height | Use the slider to set the height of the video on mobile as a percentage of the maximum height. |
| Video link | Add the direct link to your .mp4 file uploaded to your Shopify Files. Click the Link icon next to your video file to copy the URL. |
| Image fallback | Select or upload an image to display in case the video does not load. We recommend using a still image from the video. |
| Text alignment | Choose which section of the video you want to display your headings and button. |
| Text shadow amount | Change the shadow to all heading text to add more of a contrast with the video. |
| Text color | Choose the text color for the video headings. |
| Button background color | Choose the button background color of the button. |
| Button text color | Choose the button text color. |
| Overlay color | Choose the color that overlays the entire video. |
| Overlay opacity | Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. |
Click on the **Heading block** to find the following settings:
| Setting | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Heading | Enter heading text to display as the section title. |
| Heading size | Use the slider to adjust the font size of the main heading between 48px to 72px.
Make sure the heading is large enough so it's distinctive and easy to read.
|
| Subheading | Enter subheading text to display below the heading. Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor manual](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor). |
| Max width of text | Use the slider to control the maximum width and line breaks of the headings. |
\\
***
> **Related links**
>
> [Video section](/spark/pages/theme-sections/video.md)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.fluorescent.co/spark/pages/theme-sections/video-hero.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.