# Video with text

The **Video with text** section combines a feature auto-playing video with marketing content and optional button.

* Display an **auto-playing video** (without sound)
* Add **content blocks** for text, buttons, images, and more.

{% hint style="info" %}
The autoplay video does not play audio. For videos with audio, you can add a [Video player block](#add-video-player) within the section or use the [Video section](https://help.fluorescent.co/stiletto/sections/theme-sections/video) instead.
{% endhint %}

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

 

## Set up video

***

The **Video with text** section displays an autoplay video (without sound). After uploading your video, you can select the **focal point** and **aspect ratio** (shape) of your video.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

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

1. Click on the **Video with text** section to open the settings.
2. Select the **Video position** to display the image on the **Left** or **Right** side of the section.
3. Under **Shopify video**, click **Select video**.

   > Use a `.mp4` video. We strongly recommend using a 5 to 10 second video under 10MB.
4. (*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.
5. Select a **Video aspect ratio** to crop your video to **Square**, **Landscape**, or **Portrait**.

   > The **Natural** setting displays the original shape of your video.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
6. Use **Video 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>

{% 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 section to find settings`

<table><thead><tr><th width="181">Setting</th><th width="465">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 position</mark></td><td>Choose to display the featured video either <strong>Left</strong> of content or <strong>Right</strong> of content on desktop screens.</td><td></td></tr><tr><td><mark style="color:blue;">Video focal point</mark></td><td>Specify the main focus of the video for desktop and mobile. The focal point will remain centered and within frame to avoid unwanted cropping.</td><td><strong>Left</strong><br><strong>Center</strong><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Video aspect ratio</mark></td><td>For desktop and mobile, choose to crop the video to a uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping).</td><td></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://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>

## Section padding and width

***

Choose the amount of padding around the section and make the section full width.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

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

1. Click on the **Video with text** section to open the settings.
2. Select a **Padding** option to add space around the section to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.
3. Choose to **Enable full width** to make the section and video span to the edges of the page.
4. Click **Save**.

</details>

## Settings reference

***

Click the **Video with text** section to find the following settings.

#### Layout

<table><thead><tr><th width="147">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Alignment</td><td>Align the headings and button to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> within the text area.</td></tr></tbody></table>

#### Video

<table><thead><tr><th width="177">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Video</td><td><p>Upload a shopify video.<br></p><p>There are no required image dimensions. We recommend a minimum width or height of 2500px.</p></td></tr><tr><td>Video position</td><td></td></tr><tr><td>Video aspect ratio</td><td></td></tr><tr><td>Video focal point</td><td>For desktop and mobile, Select the most important part of the video to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.</td></tr></tbody></table>

## Section colors

***

<table><thead><tr><th width="161">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Background</td><td>Select the color of the section background.</td></tr><tr><td>Text</td><td>Enter multiple lines of text.</td></tr><tr><td>Button</td><td>Select the color of the button background.</td></tr><tr><td>Solid button text</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>

&#x20;&#x20;

***

> **Related links**
>
> [Video hero](https://help.fluorescent.co/stiletto/sections/theme-sections/video-hero)\
> [Image with text](https://help.fluorescent.co/stiletto/sections/theme-sections/image-with-text)\
> [Image with text split](https://help.fluorescent.co/stiletto/sections/theme-sections/image-with-text-split)