# Video hero

<figure><img src="/files/N3X2cMtfUEsPX5GEupzi" 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, that includes sound, you should use the [Video section](/megamog-theme/theme-sections/video.md) instead.

In this article, we will show you how to add and edit a Video hero section.

{% hint style="success" %}
Steps:

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Video hero.**
3. Make necessary changes.
4. **Save** the settings.
   {% endhint %}

## Section settings

### Video settings

#### Video type

Set your **Video height** and the **Video type** you want to use.

You can either add a video you've added to your [Shopify Files](https://help.shopify.com/manual/shopify-admin/productivity-tools/file-uploads), or an external video (Vimeo and Youtube accepted).

{% hint style="info" %}
Video type as Shopify hosted requires a `.mp4` video file uploaded to your **Shopify files**.&#x20;
{% endhint %}

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

After selecting the video type, add the video link or select from your Files.

### Content settings

* Content in container box: select the checkbox if you want the content to show inside the **Container width** that is set in **Theme settings** > **Layout settings**.
* **Content position**: use the dropdown options to change the position of the content on the video (desktop view). Available positions are:
  * Top left
  * Top center
  * Top right
  * Middle left
  * Middle center
  * Middle right
  * Bottom left
  * Bottom center
  * Bottom right
* **Content alignment**: Left/Center/Right.
* Select the **Overlay color** and **Overlay opacity.**

<figure><img src="/files/0xzxnbvf9c3NExNVzn7B" alt=""><figcaption></figcaption></figure>

## Block settings

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

You can add some custom texts or leave them blank to display the video on its own:

* Heading: enter heading text to display as a section title.
* Subheading: enter subheading text to display below the heading.
* Text: enter a description or extra info to your video. Use the formatting buttons to add bold, italic, or linked text.

You can add a CTA button to redirect visitors to your desired page.

* Button label: add custom text for your call-to-action button.
* Button link: select or paste a link for the call-to-action button.
* Button style: select the style of the button as a **Primary button**/ **Secondary button**/ **Outline/ Underline/ Plain.**


---

# 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://docs.foxecom.com/megamog-theme/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.