# 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](https://help.fluorescent.co/spark/pages/theme-sections/video).
## 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](https://help.fluorescent.co/spark/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/spark/general/adapting-your-theme/dynamic-content-with-metafields).
{% 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](https://help.fluorescent.co/spark/general/editing-themes/using-templates).
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](https://help.fluorescent.co/spark/pages/theme-sections/video).
| 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](https://help.fluorescent.co/spark/pages/theme-sections/video)