> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/minimog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/minimog-theme/theme-sections/video-hero.md).

# Video hero

<div data-full-width="true"><figure><img src="/files/1OZ2q7N6tFYitFzBKwTz" 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="/files/N3X2cMtfUEsPX5GEupzi" 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](/minimog-theme/theme-sections/video.md) 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="/files/BZ20q5fid1CrnbJX9PaC" alt=""><figcaption></figcaption></figure>

### Section height

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

<figure><img src="/files/jM5LmRa1fM6JXEkzTmCT" 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="/files/DnWN6UHMuXuvnH3lXsO4" 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="/files/1KZucFu9Llbev4fwJT5o" 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="/files/3DLXw1oND2vpQj4m0LGU" 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="/files/4d02koVUhe4nKysu5eGI" alt=""><figcaption></figcaption></figure> <figure><img src="/files/wmwuGjLdK9msXmwm3MX0" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/SX65AqudlKxDPLIUfi25" 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>
