# Video

The **Video** section lets you showcase a fullscreen or banner-style video with optional heading, text, button, and color overlays.

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FVxCEYdlXJUqRc7jzOLhK%2Fvideo.gif?alt=media&#x26;token=11208291-2be3-45a3-96a4-cf5b0fb236e7" alt="Gif Showcasing the design of the video section"><figcaption></figcaption></figure>

It supports autoplay background video or a popup playback mode, ensuring flexible storytelling and branding.

### YouTube and Vimeo

YouTube and Vimeo videos can only be displayed as **Popup** videos. The reason is, Shopify can't control the ads and linked videos that YouTube or Vimeo will display in the video. The result is a very unprofessional background section.&#x20;

If you need to use a YouTube or Vimeo video, we have a couple of recommendations:

* To use as a background video, download the YouTube or Vimeo video and convert it to an MP4 or MOV format, then you can simply add it to your Shopify library.
* For a popup video, you can add the YouTube or Vimeo URL in the Popup section. Use a branded image or a still frame from the video to represent the video.&#x20;

### Section settings

<table><thead><tr><th width="210.42791748046875">Settings</th><th width="172.2664794921875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Content</strong></td><td align="center"></td><td></td></tr><tr><td>Video</td><td align="center"><code>video</code></td><td>Upload a local MP4 or MOV file to play as the main video.</td></tr><tr><td><strong>Popup</strong></td><td align="center"></td><td></td></tr><tr><td>Enable popup</td><td align="center"><code>checkbox</code></td><td>Enables the video popup overlay functionality.</td></tr><tr><td>MP4/MOV</td><td align="center"><code>video</code></td><td>Upload a secondary video to be used in the popup.</td></tr><tr><td>Youtube/Vimeo link</td><td align="center"><code>video_url</code></td><td>Add a link to a YouTube or Vimeo video for popup. Accepts only these two sources.</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Title text displayed over the video.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Choose <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code> for the heading text.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Rich text editor to input supporting content.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Sets paragraph text size. Applies only when content is set as a paragraph:<code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text alignment</td><td align="center"><code>select</code></td><td>Aligns text vertically and horizontally over the video.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Label for the CTA button. Leave blank to make entire image clickable.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>URL the button should link to.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Choose button color: <code>Black</code>, <code>White</code>, <code>Primary</code>, or <code>Secondary</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Choose button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Choose button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Display an arrow icon inside the button.</td></tr><tr><td><strong>Desktop</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Fallback image if video fails to load (Recommended: 3200x1200px).</td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Defines height of section: <code>Full screen height</code>, <code>3/4 of screen</code>, <code>750 px</code>, etc.</td></tr><tr><td><strong>Mobile</strong></td><td align="center"></td><td></td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Fallback image for mobile (Recommended: 1200x1600px).</td></tr><tr><td>Height</td><td align="center"><code>select</code></td><td>Sets mobile height in screen ratio or fixed pixels.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Set section to <code>Full width</code> or <code>Full width padded</code>.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Choose a predefined color scheme.</td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Adds a background behind the text for better legibility.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Manually select text color.</td></tr><tr><td>Overlay</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Top</td><td align="center"><code>range</code></td><td>Add top padding.</td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Add bottom padding.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Define heading semantic tag: <code>H1</code>-<code>H6</code> or <code>Automatic</code>.</td></tr></tbody></table>

When enabled, the popup play button uses the same style as the call-to-action button. Adding a popup video can help display longer video content:&#x20;

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FQNDNEEl7ZFF17RfpqDb3%2Fvideo-popup.jpg?alt=media&#x26;token=572c6449-3615-402b-9391-cb644d21848b" alt=""><figcaption><p><strong>Popup play button is configured using the button settings.</strong></p></figcaption></figure>

{% hint style="info" %}
To display a circle-shaped play button, use the **Theme settings -> Buttons** and choose the "**Pill**" style. The square version is a regular rectangular shape, and the rounded version has rounded corners.&#x20;
{% endhint %}

### Video Overview

How to use the video section. This video demonstrates how to use the settings and options, plus details about the cover image and video types for looping and YouTube videos:

{% embed url="<https://www.loom.com/share/e846f226cf8f458f9aa49dfc69c53e10?sid=5cdeea90-a6ad-4a12-ad57-2bcf6efc9fa4>" %}
**Video walkthough of the video section in Broadcast**
{% endembed %}