# Video hero

{% hint style="info" %}
This section was updated in v3.0.0 to use Shopify video, which lets you directly upload a video and alternate mobile video. See our [Changelog](https://help.fluorescent.co/stiletto/readme/changelog) and [theme update guide](https://help.fluorescent.co/stiletto/general/theme-updates) to learn more.
{% endhint %}

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

> If you want to add a Vimeo or YouTube video (with sound), you can use the [Video section](https://help.fluorescent.co/stiletto/sections/theme-sections/video).

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

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

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

## Add background video

***

The **Video hero** section displays an autoplay video (without sound) as the background. After uploading your video, you can select the **focal point** of your video and add a **color overlay**.

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

{% hint style="warning" %}
For theme versions 3.0.0 and later, you can upload a `.mp4` video directly in the section settings. For earlier versions, you must upload your video to *Content > Files* in your Shopify admin, then copy the file link into the section settings.
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS (v3.0.0 or later)</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Video hero** section.
2. Under **Shopify video**, click **Select video**.

   > Select a .mp4 video, or click Add videos to upload a .mp4 video file.
3. (*Optional*) Under **Mobile Shopify video**, click **Select video** for a background video that appears only on mobile devices.

   > You may want to upload a video file that has been cropped to a different shape (aspect ratio) to better fit a vertical screen.
4. Under **Media height**, choose to display the video with a **Custom** or the **Original** height (without cropping).
5. If **Custom** height is selected: adjust the **Height** and **Mobile Height** of your video between 50% to 100% of the maximum height.

   > The **Height** is the percentage of the window height on your customer's device. When **Custom height** is set to 50%, the video will always display at half the height of the customer's screen.
6. Use **Media focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.
7. Click **Save**.

</details>

<details>

<summary><mark style="color:blue;"><strong>STEPS (v2.4.0 or earlier)</strong></mark></summary>

In your **Shopify admin**:

1. Go to **Content > Files** to open your [Shopify files](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-b07c1c046c9b84e54c0a68287dde69a8fec07224%2Fshopify-files.jpeg?alt=media)
2. Click the **Upload files** button to add your **`.mp4`** file from your computer.
3. Once your file has been processed, click the **Link icon** next to the file to copy the *URL*.

   > You may need to refresh the page for your file to appear.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-6f3a83051762c666a182acfecdd53269ed7141af%2Fshopify-files-link.jpeg?alt=media)

In the theme editor (**Customize**):

1. Click the **Video hero** section to open the settings.
2. Paste the link into the **Video link** field. Click on the the link that appears in the results above.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-274126cc29126e394eb8011f10c018251e71a559%2Fvideo-link.jpeg?alt=media)
3. Click **Save**.

</details>

`Click 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;">Mobile</mark> <mark style="color:blue;">Shopify video</mark></td><td>Select or upload an alternate video to show on mobile devices.</td></tr><tr><td><mark style="color:blue;">Media 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>

### Add color overlay

***

The **overlay** adds a layer of color to your video. Overlays help balance image and text for clarity and readability.

`Click section to find settings`

<table><thead><tr><th width="181">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Overlay</mark></td><td>Select a color to overlay the image. This option helps provide contrast with text and headings to keep them clear and readable.</td></tr><tr><td><mark style="color:blue;">Overlay gradient</mark></td><td>Add a color overlay that fades across a range of hues. You can choose the style, angle, position, and opacity of the gradient. See Shopify's <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</td></tr><tr><td><mark style="color:blue;">Overlay opacity</mark></td><td>Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.</td></tr></tbody></table>

## 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://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FQfyhAqrKJfP6pxkP9LWz%2Fcontent-blocks-add.png?alt=media&#x26;token=da68fb05-2293-4195-b4bd-450af5c1d782" alt="" width="293"><figcaption></figcaption></figure> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FQmsKeHtAcZpIlRxsDxVL%2Fcontent-blocks.png?alt=media&#x26;token=fda6bf79-81ae-4a18-97df-13c0c0e2d8ad" alt="" width="375"><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden 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>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>Border</strong></mark></td><td>Add divider 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 **position** of the content blocks.

`Click section to find settings`

<table><thead><tr><th width="202">Setting</th><th>Description</th></tr></thead><tbody><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>

## Section colors

***

Change the general colors of the section. Apply a color scheme or use custom colors.

`Click section to find settings`

<table><thead><tr><th width="152">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>Select a custom color for the section text.</td></tr><tr><td><mark style="color:blue;">Buttons</mark></td><td>Select a custom color for the section background.</td></tr><tr><td><mark style="color:blue;">Solid button text</mark></td><td>If the <strong>Solid</strong> button style is selected in the button block settings, select the color for the button text.</td></tr></tbody></table>

***

> **Related links**
>
> [Video section](https://help.fluorescent.co/stiletto/sections/theme-sections/video)