# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/sections/video.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.