# Video with content

Use the **Video with content** section to combine an autoplay video (without sound) side-by-side with promotional text and button.

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up section

***

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

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../section-styles#section-colors">#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

## Set up autoplay video

***

In the section settings, upload short video (without sound) to autoplay. After uploading your video, you can select the **focal point** of your video.

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

`Click Video with content section to find settings`

<table><thead><tr><th width="194">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Video</mark></td><td>Select or upload a video that autoplays (without sound).</td></tr><tr><td><mark style="color:blue;">Video aspect ratio</mark></td><td>Choose to crop the video to a uniform shape. Select <strong>Portrait (2:3)</strong>, <strong>Portrait (4:5)</strong>, <strong>Square (1:1)</strong>, <strong>Landscape (5:4)</strong>, or <strong>Landscape (3:2)</strong>.<br><br>Select <strong>Natural</strong> to display the video in its original shape (without cropping).</td></tr><tr><td><mark style="color:blue;">Video 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;">Video caption</mark></td><td>Enter text to display a small caption below the video.</td></tr></tbody></table>

### Change video layout

***

After uploading a video, adjust the **width** and **position.**

`Click Video with content section to find settings`

<table><thead><tr><th width="170">Setting</th><th width="337">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image width</mark></td><td>Set the maximum width of the image area on desktop.</td><td><strong>30 - 60</strong> %</td></tr><tr><td><mark style="color:blue;">Desktop image position</mark></td><td>Position the image to the left or right of the text content.</td><td><strong>Left of content</strong><br><strong>Right of content</strong></td></tr><tr><td><mark style="color:blue;">Mobile image position</mark></td><td>On mobile, show the image before or after the content area .</td><td><strong>Above content</strong><br><strong>Below content</strong></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://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FWpPCYcBnxJ7gJK27tZP0%2Fcontent-blocks.png?alt=media&#x26;token=ce14a103-e169-4e00-85db-8d29e3f830e6" alt="" width="212"><figcaption></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FKuqYPr6WhFEJjniMYgYN%2Fcontent-blocks-left.png?alt=media&#x26;token=2db579fe-c354-46ff-a11d-f6f2603e6bde" alt="" width="268"><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>Text list with icons</strong></mark></td><td>Add column text with icons.</td><td><a href="../content-blocks#text-list-with-icons">#text-list-with-icons</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>Divider</strong></mark></td><td>Add border 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 **width** and **alignment** of the content blocks area.

`Click Video with content section to find settings`

<table><thead><tr><th width="199">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content widthwz</mark></td><td>Display the section at <strong>full width</strong> or set a <strong>custom width</strong></td></tr><tr><td><mark style="color:blue;">Custom width</mark></td><td>Set the maximum width of the section: between <strong>400</strong> and <strong>800 px</strong>.</td></tr><tr><td><mark style="color:blue;">Alignment</mark></td><td>Choose to align the content blocks to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> within the content area.</td></tr></tbody></table>