# Video hero

<figure><img src="https://content.gitbook.com/content/SnkJrgCgnPuM88XGWwwm/blobs/FE1DEtGBB9IAvmcSNC25/ezgif.com-video-to-gif.gif" 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](https://docs.foxecom.com/megamog-theme/theme-sections/video) 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="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FMlBeditQJC9HTwszeaB8%2Fimage.png?alt=media&#x26;token=a1b536e7-9926-47af-b75f-b40f4804d990" 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="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fi5u5RDD9eexyFtJSDAw8%2Fimage.png?alt=media&#x26;token=d12cf193-2d63-4a23-ae45-fc8ce068c8f3" alt=""><figcaption></figcaption></figure>

## Block settings

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fru2QjWMMJTZF1yEQnYo8%2Fimage.png?alt=media&#x26;token=3091c865-9ae5-48a3-bfa7-120da25bd132" 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.**