# Video hero

{% hint style="info" %}
The Video hero section was added in v1.2.0 — [Update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme) to access new features.
{% endhint %}

The **Video hero** section displays a full-width autoplaying video (without sound) with overlaid headings, text, and buttons.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FmlbL4HplbcqUOs5tXQY8%2Fvideo-hero.png?alt=media&#x26;token=fea56c60-b315-4a8a-a709-77ce316051e9" alt="" width="563"><figcaption><p><a href="https://eclipse-theme-journey.myshopify.com/pages/race-run-clubs#video-hero">View demo</a></p></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/eclipse/pages/templates/using-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/eclipse/general/editing-themes/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Video hero**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="#section-colors">#section-colors</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#section-padding</a></td><td></td></tr></tbody></table>

## Set up autoplay video

***

In the section settings, upload a .mp4 or .mov for a background video that autoplays (without sound).&#x20;

You can upload an alternate **mobile video**, set a **focal point**, and customize the **overlay colors** to make your video look great on all devices.

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Using color overlays</strong></mark></td><td>Learn how to change overlay colors and use gradients.</td><td><a href="../overview/section-styles#overlay-colors">#overlay-colors</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FJmND9VbF4HtwEqV18aeb%2Foverlay-color-gradient.png?alt=media&#x26;token=953171f8-094a-43c4-97fe-2c767e76505e">overlay-color-gradient.png</a></td></tr></tbody></table>

{% tabs %}
{% tab title="Video requirements" %}
For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="210"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>&#x3C; 20 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

&#x20;

`Click Video hero section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Shopify video</mark></td><td>Select or upload a video that autoplays (without sound).</td><td></td></tr><tr><td><mark style="color:blue;">Mobile Shopify video</mark></td><td>Select or upload an alternate video to show on mobile devices.</td><td></td></tr><tr><td><mark style="color:blue;">Focal point</mark></td><td>For desktop and mobile, specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.</td><td><strong>Center</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Top</strong><br><strong>Bottom</strong><br><strong>Left</strong><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Background link</mark></td><td>Select a page or URL to make the entire video a clickable link.</td><td></td></tr><tr><td><mark style="color:blue;">Image animation</mark></td><td>Change the animation style of how the video loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.</td><td><strong>None</strong><br><strong>Fade</strong><br><strong>Iris wipe</strong></td></tr></tbody></table>

### Change video height

***

You can adjust the height to make the video tall or compact. Choose to display the video with a **Fixed** or **Relative** height.

* **Fixed** heights maintain the same pixel height on all screens.
* **Relative** heights adapt the image height as a percentage of the screen height.

&#x20;

`Click Video hero section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop height</mark></td><td>Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).</td><td><strong>Fixed height</strong><br>250 - 750px<br><strong>Relative height</strong><br>50 - 100%<br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 650px</mark></td></tr><tr><td><mark style="color:blue;">Mobile height</mark></td><td>Change the maximum height of the video on mobile. Choose a fixed height (in pixels) or relative height (as a percentage of the screen height).</td><td><strong>Fixed height</strong><br>150 - 750px<br><strong>Relative height</strong><br>50 - 100%<br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 450px</mark></td></tr></tbody></table>

&#x20;&#x20;

## Add content blocks

***

Click **(+) Add block** to add text and image content to the section. Use the drag handles **`⋮⋮`** to re-order blocks, and add **Spacer** and **Divider** blocks to further customize the layout.

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F2bJuQwRSZ37zWPCfgEVZ%2Fcontent-blocks-add.png?alt=media&#x26;token=b226c9a1-d607-4439-8f9a-325707fb411f" alt=""><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FNBntxSpdVe98DZrI1ykk%2Fcontent-blocks-left.png?alt=media&#x26;token=85ae78d7-8b34-41c6-a957-498bc5352db4" alt=""><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td><a href="../overview/content-blocks#heading-block">#heading-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td><a href="../overview/content-blocks#text-block">#text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Overline text</strong></mark></td><td><a href="../overview/content-blocks#overline-block">#overline-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td><a href="../overview/content-blocks#button-block">#button-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td><a href="../overview/content-blocks#image-block">#image-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td><a href="../overview/content-blocks#spacer-block">#spacer-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td><a href="../overview/content-blocks#divider-block">#divider-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td><a href="../overview/content-blocks#liquid-block">#liquid-block</a></td></tr><tr><td></td><td></td></tr></tbody></table>

### Change content layout

***

Adjust the alignment and width of the content blocks.

&#x20;

`Click Video hero section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="353">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Use the sliders to set the maximum width (in pixels) of the section content.</td><td><strong>200-1000 px</strong> <br><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 500</mark></td></tr><tr><td><mark style="color:blue;">Text position</mark></td><td>Set the position of the text content for desktop screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr><tr><td><mark style="color:blue;">Mobile text position</mark></td><td>Set the position of the text content for mobile screens.</td><td><strong>Top / Middle / Bottom</strong><br><strong>Left / Center / Right</strong></td></tr></tbody></table>

## Section colors

***

The section uses two color schemes. The first color scheme applies a section **background** color, and the **overlay** color scheme applies text, button, and overlay tint colors.

### Change background color

***

The section background is visible when the section has **top and bottom** **padding** or when the section width is **page width** or **full width padded**.

In the section settings, select a **color scheme** (at the top of the settings panel) to apply its background color. You can edit the color scheme in your theme settings.