# Video hero

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a><span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fn3htfRcGSRNr7HPunloz%2Fezgif.com-video-to-gif.gif?alt=media&#x26;token=5aa9ae98-c2b5-4eab-a730-88e0f53a387b" alt=""><figcaption></figcaption></figure>

The **Video hero** section displays an auto-playing video (without sound) to add dynamism into your page.

If you want to add a Vimeo or YouTube video, which includes sound, you should use the [Video section](https://docs.foxecom.com/minimog-theme/theme-sections/video) instead.

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

## How to add a Video hero

{% 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 %}

## General settings

### Container type

Set the container type of the section by selecting the relevant option:

* Default: based on the **Container max-width** you set in **Theme settings** > **Layout settings.**
* Full width: to span the content from right to left and takes the full 100% of the screen's width.
* Use container box: based on the **Container width** you set in **Theme settings** > **Layout settings**.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FrTQOsNqcEVNCK9tOFmpu%2Fimage.png?alt=media&#x26;token=7887035a-1600-4c8d-9caa-1981ec63cd60" alt=""><figcaption></figcaption></figure>

### Section height

Adjust the overall **Height** of the video.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FJYW3L1mfl9Jv1BeP0nMq%2Fimage.png?alt=media&#x26;token=56cd1e55-6fe8-4967-afb8-68000d0ac2dc" alt=""><figcaption></figcaption></figure>

## Video settings

### Video type

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&#x20;
* Upload 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://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FFSxG5KG2lGn7OJTwG760%2Fimage.png?alt=media&#x26;token=0f5850b8-8009-424c-891c-4b59e05ffeab" 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
* Text size: set the size of the text as **Medium** or **Large**.
* Text color: choose the text color for the video headings and description as **Light** or **Dark**.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FAb5eGAehXtQ8MsE4syOn%2Fimage.png?alt=media&#x26;token=b6e866b8-35aa-47ae-a71c-c6ea02163772" 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.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FMy1B7yFhFmHRX53nTqbg%2Fimage.png?alt=media&#x26;token=b6df0067-da3c-460f-89e7-c86ab00682db" alt=""><figcaption></figcaption></figure>

You can link to your collections or products or any other page with **two** custom call-to-action buttons:

* 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**/ **White button**/ **Underline button**.
* Button size: set the size of the button as **small**/ **medium**/ **large**.

<div><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FaUmUZim7RL3nhzQOlO6E%2Fimage.png?alt=media&#x26;token=41fe488f-aa96-4081-a191-d2fe577ed74f" alt=""><figcaption></figcaption></figure> <figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FG1doisxgWEJmq89DWR0K%2FMinimog-Doc-%C2%B7-Customize-Test-MINIMOG-v5-0-2-cho-docs-%C2%B7-Shopify.png?alt=media&#x26;token=c517c3d3-daa5-4155-9d0b-432768fcbc2d" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FGeIkBQFI4LGjyGqhvlet%2Flivechat883x471%20(1).png?alt=media&#x26;token=9168d917-bd02-4cd6-a7af-eb9896c7a5ef" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_minimog&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>
