> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/sections/video.md).

# Video

<figure><img src="/files/KF4HitdHjVEF9padZNXN" alt=""><figcaption></figcaption></figure>

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

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Video**. 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="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td></td></tr></tbody></table>

## Set up video

***

The **Video** section accepts videos uploaded to Shopify or linked videos from Youtube and Vimeo.

### Upload and embed video

`Click Video section to find settings`

<table><thead><tr><th width="221">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Shopify video</mark></td><td>Select or upload a video.</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></tr><tr><td><mark style="color:blue;">Youtube or Vimeo URL</mark></td><td>Enter the full URL of your YouTube or Vimeo video. The video must be public.</td></tr><tr><td><mark style="color:blue;">Video alt text</mark></td><td>Enter alt text to describe the content and purpose of the video for customers using screen readers.</td></tr></tbody></table>

### Change aspect ratio and focal point

***

You can crop the video to a uniform shape (**Aspect ratio**) and select the **Focal point** of your video to keep the most important part centred and avoid unwanted cropping.

{% hint style="warning" %}
These options only apply to **Shopify-hosted videos**.
{% endhint %}

&#x20;

`Click Video 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;">Aspect ratio</mark></td><td>Crop the video to a uniform shape, or select Natural to maintain its original shape. "Aspect ratio" refers to the proportion between the video's width and height (W:H).</td><td><strong>Natural</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Portrait (2:3)</strong><br><strong>Portrait (4:5)</strong><br><strong>Square (1:1)</strong><br><strong>Landscape (5:4)</strong><br><strong>Landscape (3:2)</strong><br><strong>Landscape wide (16:9)</strong><br><strong>Landscape ultrawide (21:9)</strong></td></tr><tr><td><mark style="color:blue;">Video focal point</mark></td><td>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></tbody></table>

### Add cover image

***

After choosing your video, you can add a **Cover image** that overlays the video before visitors click play.

&#x20;

<table><thead><tr><th width="195">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Cover image</mark></td><td>Select or upload a preview image that overlays the video player. There are no required dimensions. A minimum width of 2500px will ensure optimal quality on the widest screens.</td></tr></tbody></table>

### Play video on loop

After adding your video, you can choose to **Play the video on loop**.

&#x20;

`Click Video 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;">Play video on loop</mark></td><td>When checked, the video will start over after ending.</td><td></td></tr></tbody></table>

## 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="/files/y6QvuNTjUyDpm7r7AO5y" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ilLCbPLKSa8N4nzH3WMB" 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="/pages/1RQDWwxKzKWmtVBL177n#heading-block">/pages/1RQDWwxKzKWmtVBL177n#heading-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#text-block">/pages/1RQDWwxKzKWmtVBL177n#text-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Overline text</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#overline-block">/pages/1RQDWwxKzKWmtVBL177n#overline-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#button-block">/pages/1RQDWwxKzKWmtVBL177n#button-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#image-block">/pages/1RQDWwxKzKWmtVBL177n#image-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#spacer-block">/pages/1RQDWwxKzKWmtVBL177n#spacer-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#divider-block">/pages/1RQDWwxKzKWmtVBL177n#divider-block</a></td></tr><tr><td><mark style="color:blue;"><strong>Custom Liquid</strong></mark></td><td><a href="/pages/1RQDWwxKzKWmtVBL177n#liquid-block">/pages/1RQDWwxKzKWmtVBL177n#liquid-block</a></td></tr></tbody></table>

### Change content layout

***

`Click Video section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="378">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> <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 alignment</mark></td><td>Set the position of the text content for desktop screens.</td><td><strong>Left</strong><br><strong>Center</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Right</strong></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>Above video</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Below video</strong></td></tr></tbody></table>