# Video with text

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

Use the **Video with text** section to combine an autoplay video (without sound) side-by-side with promotional text and button. With a flexible layout and optional content blocks, you can achieve a wide variety of looks.

* Add a featured **video** and **content blocks**.
* Customize the **layout** and change the **container color** for alternate looks.

> Check out the related [Image with text section](https://help.fluorescent.co/eclipse/sections/image-with-text).

{% 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 with text**. 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="../overview/section-styles#color-scheme">#color-scheme</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 video

***

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

<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 with text 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;">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><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></tbody></table>

### Change video layout

***

`Click Video with text 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 video width</mark></td><td>Set the maximum width of the video on desktop.</td><td><strong>35-70</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 50</mark></td></tr><tr><td><mark style="color:blue;">Desktop video position</mark></td><td>Position the video to the left or right of the text content.</td><td><strong>Left of content</strong><br><strong>Right of content</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr><tr><td><mark style="color:blue;">Mobile video position</mark></td><td>On mobile, show the video before or after the text.</td><td><strong>Video first</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Video second</strong></td></tr><tr><td><mark style="color:blue;">Video breathing room</mark></td><td>Use the slider to add spacing around the video. Set the slider to 0 to display the video at the full width and height of the video area.</td><td><strong>0-60</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 0</mark></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="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="" width="375"><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="" width="375"><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></tbody></table>

### Change content layout

***

Change the width and alignment of all content blocks.

`Click 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;">Content width</mark></td><td>Display the section at full width of the screen or set a custom width. <br><br>Under <em>Section</em>, you can also set the section width.</td><td><strong>Full width</strong><br><strong>Custom width</strong></td></tr><tr><td><mark style="color:blue;">Custom 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></td></tr><tr><td><mark style="color:blue;">Content position</mark></td><td>For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions.<br><br>The horizontal and vertical placement applies when there's enough room in the content area.</td><td></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> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Center</strong><br><strong>Right</strong></td></tr></tbody></table>

## Change container color

***

Change the **Container color scheme** to show a background color for the content area.

You can add and define different color schemes in Theme settings > Colors. [Learn more](https://help.fluorescent.co/eclipse/overview/section-styles#section-colors)


---

# 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-with-text.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.