# Video hero

Add the **Video hero** section to show a full-width autoplaying video (without sound), uploaded as a .mp4 file to your Shopify files.

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/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

Sections include general styles. Click the section to find options for **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></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="../section-styles#image-overlays">#image-overlays</a></td><td><a href="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F73JN6EXgS8wovHQZ2N6u%2Foverlay-solid.png?alt=media&#x26;token=780c4a79-021f-4cd4-96e1-f7ea21e4356e">overlay-solid.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="194">Setting</th><th>Description</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></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></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></tr></tbody></table>

&#x20;

### Change width and 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="169">Setting</th><th width="411">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable full width</mark></td><td>Choose to span the image across the whole window or screen, removing the margins on either side.</td><td></td></tr><tr><td><mark style="color:blue;">Banner height</mark></td><td>Set the banner height to either <strong>Adapt to video</strong> (use your video’s height) or select a <strong>Custom height</strong>.</td><td></td></tr><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 - 650px<br><strong>Relative height</strong><br>50 - 100%</td></tr><tr><td><mark style="color:blue;">Custom 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 - 650px<br><strong>Relative height</strong><br>50 - 100%</td></tr></tbody></table>

&#x20;

## Add content blocks

***

Use blocks to customize the content area of the section. Click **(+) Add block** to add text, buttons, and other media. Use the drag handles **`⋮⋮`** to re-order blocks, and change the layout in the section settings.

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FWpPCYcBnxJ7gJK27tZP0%2Fcontent-blocks.png?alt=media&#x26;token=ce14a103-e169-4e00-85db-8d29e3f830e6" alt="" width="212"><figcaption></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FKuqYPr6WhFEJjniMYgYN%2Fcontent-blocks-left.png?alt=media&#x26;token=2db579fe-c354-46ff-a11d-f6f2603e6bde" alt="" width="268"><figcaption></figcaption></figure></div>

&#x20;

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Accent</strong></mark></td><td>Add small label heading.</td><td><a href="../content-blocks#accent">#accent</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="../content-blocks#heading">#heading</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Add multiple lines of rich text.</td><td><a href="../content-blocks#text">#text</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td>Add buttons with custom styles.</td><td><a href="../content-blocks#button">#button</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Add images with custom sizes.</td><td><a href="../content-blocks#image">#image</a></td></tr><tr><td><mark style="color:blue;"><strong>Text list with icons</strong></mark></td><td>Add column text with icons.</td><td><a href="../content-blocks#text-list-with-icons">#text-list-with-icons</a></td></tr><tr><td><mark style="color:blue;"><strong>Video player</strong></mark></td><td>Add video that plays in a popup viewer.</td><td><a href="../content-blocks#video-player">#video-player</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td>Add border between blocks.</td><td><a href="../content-blocks#divider">#divider</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td>Add space between blocks.</td><td><a href="../content-blocks#spacer">#spacer</a></td></tr></tbody></table>

### Change content layout

***

In the section settings, change the **width** and **layout** of the content blocks area.

`Click Video hero section to find settings`

<table><thead><tr><th width="201">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Set the maximum width of the section: between <strong>400</strong> and <strong>1000</strong> <strong>px</strong>.</td></tr><tr><td><mark style="color:blue;">Text position</mark></td><td>Change the position of the content blocks within the section for desktop screens.</td></tr><tr><td><mark style="color:blue;">Mobile text position</mark></td><td>Change the position of the content blocks within the section for mobile screens.</td></tr></tbody></table>

&#x20;

### Show text box

***

Enable the **text box** to display the content blocks inside a container. Change the text and background **colors**, and choose to show **shadows** or **borders** around the text box.

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F1IlcUx1CiiuemvRF247u%2Ftext-box.png?alt=media&#x26;token=db9b1411-8274-4cc4-95e3-a7d21214395e" alt=""><figcaption><p>Soft shadow</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FY0ixtRIckHZYj5cOdTw1%2Ftext-box-shadow.png?alt=media&#x26;token=1e3e62fa-d5c2-4c31-a476-b2014989dd27" alt=""><figcaption><p>Solid shadow</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FlquZUPY7bpLAKH624yY7%2Ftext-box-border.png?alt=media&#x26;token=58816514-bec7-4250-947f-cb4852b84f57" alt=""><figcaption><p>Thick border</p></figcaption></figure></div>

`Click Image hero section to find settings`

<table><thead><tr><th width="203">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show text box</mark></td><td>Display all content blocks within a container.</td></tr><tr><td><mark style="color:blue;">Text box style</mark></td><td>Display boxes with a <strong>Soft drop shadow</strong>, <strong>Solid drop shadow</strong>, or <strong>Borders</strong> with different thicknesses.</td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td>Change the color scheme applied to the text box.<br><br>Use the <strong>Default</strong> color scheme from your theme settings or select a variant scheme based on the default: either <strong>Inverse</strong>, <strong>Soft</strong>, <strong>Accent</strong>, or <strong>Sale</strong>. You can also select a <strong>custom color scheme.</strong> <a href="../../../theme-styles/colors#color-schemes">Learn more</a>.</td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Use custom colors for this section to override the color scheme.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for text within the text box.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a custom color for the background of text box.</td></tr></tbody></table>

&#x20;

<br>

***

> **Related links**
>
> [Image hero](https://help.fluorescent.co/cornerstone/pages/theme-sections/image-hero)