# Video hero

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](/context/readme/theme-retirement.md).
{% endhint %}

Add the **Video hero** section to show a full-width autoplaying video (without sound), uploaded as a .mp4 file to your Shopify files.

{% hint style="info" %}
If you want to add a Vimeo or YouTube video (with sound), you can use the [Video section](/context/sections/theme-sections/video.md).
{% endhint %}

## 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](/context/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/context/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

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](/context/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.

</details>

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

{% hint style="info" %}
The autoplay video does not play audio. To embed a video from YouTube or Vimeo with audio, see Context's [Video section](/context/sections/theme-sections/video.md).
{% endhint %}

| File Format | .mp4 video (required)        |
| ----------- | ---------------------------- |
| File size   | Maximum 10MB (recommended)   |
| Duration    | 5 - 10 seconds (recommended) |

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

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).

   ![](/files/obW5rylNTaKvBj0ANfm1)
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.

   ![](/files/4XPfYNEadIFrypEGasaU)

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.

   ![](/files/Th9co8JleEFpvvpl9mgW)
3. Click **Save**.

</details>

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

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

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**.

</details>

<br>

***

> **Related links**
>
> [Video section](/context/sections/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/context/sections/theme-sections/video-hero.md?ask=<question>
```

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.