> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/basic/video.md).

# Video

Add product demos or brand videos, then control cropping, sizing, autoplay, and styling for desktop and mobile.

Use it for product demos, lifestyle clips, or brand storytelling. Upload a video file or link to one hosted elsewhere, then control how it's cropped, sized, and styled on desktop and mobile independently, including how it plays and loops.

### 1. What you can do

With the Video block, you can:

* Display product demos, brand videos, or lifestyle footage, either uploaded directly to Shopify or linked from an external source
* Set a cover image that customers see before the video starts playing
* Add alt text so customers using screen readers understand what the video shows
* Autoplay the video automatically or have it loop continuously
* Set aspect ratio, corner rounding, and width separately for desktop and mobile
* Apply a visual filter such as Warm, Vintage, Grayscale, or High contrast

### 2. How to add a Video block

You can add a Video block to any [custom section](/arctos-theme/section-templates/section.md) or any compatible block, with no limit on how many you use in a single section.

{% stepper %}
{% step %}
**Click the section or block**

In the Theme Editor (Customize), click the section or block where you want to add a video.
{% endstep %}

{% step %}
**Add a video block**

Click **Add block**.
{% endstep %}

{% step %}
**Select Video**

Select **Video** from the block list.
{% endstep %}

{% step %}
**Choose your video source**

Choose **Uploaded** or **External URL** as your source, then upload your video file or paste the video link.
{% endstep %}

{% step %}
**Adjust the settings**

Control sizing, playback, and appearance using the settings described below.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 3. Block settings

These settings let you control where your video comes from, how it plays, and how it looks on your storefront.

#### 3.1. Source

These settings control what video plays in the block, what customers see before it starts, and how it behaves on load.

<table data-search="false"><thead><tr><th width="143.29296875">Setting</th><th width="166.796875">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Source</strong></td><td><ul><li>Uploaded</li><li>External URL</li></ul></td><td><ul><li>Choose <strong>Uploaded</strong> to host the video file directly in Shopify.</li><li>Choose <strong>External URL</strong> to link to a video hosted on YouTube or Vimeo.</li></ul></td></tr><tr><td><strong>Video</strong></td><td><ul><li>Video file picker</li></ul></td><td>Select a video file from your Shopify files. <em>Only available when <strong>Source</strong> is set to <strong>Uploaded</strong>.</em></td></tr><tr><td><strong>URL</strong></td><td><ul><li>YouTube</li><li>Vimeo URL</li></ul></td><td>Enter a video link from YouTube or Vimeo. <em>Only available when <strong>Source</strong> is set to <strong>External URL</strong>.</em></td></tr><tr><td><strong>Cover image</strong></td><td>Image picker</td><td>Sets the still image customers see before the video starts playing. You can upload a new image, select one from your file library, or use one of Shopify's free stock photos.</td></tr><tr><td><strong>Show different video on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables an independent video source, file, and cover image specifically for mobile screens.</td></tr><tr><td><strong>Source (mobile)</strong></td><td><ul><li>Uploaded</li><li>External URL</li></ul></td><td>Chooses the mobile video source. <em>Available when <strong>Show different video on mobile</strong> is <strong>On</strong>.</em></td></tr><tr><td><strong>Video (mobile)</strong></td><td>Video file picker</td><td>Selects a separate mobile video file. <em>Available when <strong>Show different video on mobile</strong> is <strong>On</strong> and mobile <strong>Source</strong> is <strong>Uploaded</strong>.</em></td></tr><tr><td><strong>URL (mobile)</strong></td><td>YouTube or Vimeo URL</td><td>Enters a separate mobile video link. <em>Available when <strong>Show different video on mobile</strong> is <strong>On</strong> and mobile <strong>Source</strong> is <strong>External URL</strong>.</em></td></tr><tr><td><strong>Cover image (mobile)</strong></td><td>Image picker</td><td>Sets a dedicated still cover image for mobile screens. <em>Available when <strong>Show different video on mobile</strong> is <strong>On</strong>.</em></td></tr><tr><td><strong>Video alt text</strong></td><td>Text field</td><td>Describes the video for customers using screen readers. <a href="https://help.shopify.com/manual/online-store/themes/theme-structure/theme-features#video">Learn more</a></td></tr><tr><td><strong>Enable video autoplay</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Starts the video automatically when the page loads, without the customer needing to press play.</td></tr><tr><td><strong>Enable media controls</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Displays playback and volume controls on the video. <em>Only available when <strong>Enable video autoplay</strong> is On.</em></td></tr><tr><td><strong>Enable loop video</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Restarts the video automatically once it finishes. Useful for short, ambient, or background-style clips.</td></tr></tbody></table>

{% hint style="info" %}
Browsers block autoplay on videos with sound, so any video set to autoplay is muted automatically. If you need the customer to hear audio, turn off autoplay and let them press play themselves.
{% endhint %}

#### 3.2. Layout

These settings control the shape and size of the video frame, independent of the video file itself.

<table><thead><tr><th width="139.06640625">Setting</th><th width="161.17578125">Options</th><th width="489.66015625">What it does</th></tr></thead><tbody><tr><td><strong>Orientation</strong></td><td><ul><li>Auto</li><li>Square</li><li>Portrait</li><li>Landscape</li></ul></td><td><ul><li><strong>Auto</strong> keeps the video's original ratio with no cropping.</li><li><strong>Square</strong> crops to 1:1</li></ul><p><em>Choosing <strong>Portrait</strong> or <strong>Landscape</strong> will unlock a secondary Aspect ratio settings with specific options for that format:</em></p><ul><li><strong>Portrait</strong> crops to a vertical format (9:16, 4:5, 3:4, 5:7)</li><li><strong>Landscape</strong> crops to a horizontal format (16:9, 4:3, 3:2, 21:9)</li></ul></td></tr><tr><td><strong>Width</strong></td><td><ul><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fill</strong> stretches the video to fill the full available width.</li><li><strong>Custom</strong> lets you set an exact width in pixels or as a percentage.</li></ul><p><em>Video height is calculated automatically based on the width and your chosen aspect ratio.</em></p></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on if you want a different width and aspect ratio on mobile than what's set for desktop.</td></tr></tbody></table>

#### 3.3. Style

These settings control how the video looks beyond its size and crop: its color treatment, corner shape, and any overlay placed on top of it.

<details>

<summary>Overlay</summary>

Adds a semi-transparent color layer on top of the video, useful for darkening footage so text placed over it stays readable.

<table><thead><tr><th width="123.25390625">Setting</th><th width="139.1328125">Options</th><th width="429.37109375">What it does</th></tr></thead><tbody><tr><td><strong>Color style</strong></td><td><ul><li>Solid</li><li>Gradient</li></ul></td><td><ul><li>Use <strong>Solid</strong> for a clean, uniform backdrop that helps text stand out clearly.</li><li>Use <strong>Gradient</strong> to add visual depth or a subtle fade that blends the video into the layout.</li></ul></td></tr><tr><td><strong>Color code</strong></td><td>Color or gradient picker</td><td>Sets the exact overlay color.</td></tr></tbody></table>

</details>

<details>

<summary>Filter presets</summary>

Applies a ready-made color treatment with no video editing needed.

<table><thead><tr><th width="119.75390625">Options</th><th width="543.8828125">When to use</th></tr></thead><tbody><tr><td><strong>Normal</strong></td><td><ul><li>Effect: No filter applied</li><li>Best for: Keeping the video’s original colors and natural look</li></ul></td></tr><tr><td><strong>Grayscale</strong></td><td><ul><li>Effect: Removes all color for a clean black-and-white look</li><li>Best for: Creating a timeless, elegant feel or minimizing color clutter to make text overlay pop</li></ul></td></tr><tr><td><strong>Vintage</strong></td><td><ul><li>Effect: Adds warm, faded tones</li><li>Best for: Giving photos a nostalgic, retro, or cozy aesthetic</li></ul></td></tr><tr><td><strong>Warm</strong></td><td><ul><li>Effect: Enhances golden and sun-kissed tones</li><li>Best for: Making portraits, food, or outdoor shots feel inviting and vibrant</li></ul></td></tr><tr><td><strong>High contrast</strong></td><td><ul><li>Effect: Deepens darks and brightens highlights</li><li>Best for: Making dramatic, bold images that stand out and catch the eye immediately</li></ul></td></tr><tr><td><strong>Fade</strong></td><td><ul><li>Effect: Softens the colors with a washed-out matte look</li><li>Best for: Low-contrast designs where you want text layered on top to be effortlessly readable</li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Corner radius</summary>

Controls how rounded the corners of your video frame are.

* **Main corner** matches the global corner radius set in your theme.
* **Small** and **Extra small** inherit from the [main corner](https://ursus-ecom.gitbook.io/arctos-theme/blocks/basic/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner) value and scale it down proportionally for a subtler effect.
* **None** removes rounding entirely for a sharp, full-bleed look.
* **Custom** lets you set a precise value to match a specific design.

{% hint style="info" %}
For a professional look, inner elements (like this Video block) should have a smaller corner radius than the outer container to maintain visual harmony.

* If your outer container uses the **Main corner,** choose **Small** or **Extra small** for this video.
* As a rule of thumb, if the container has large padding, drop the video radius by 2 levels; for normal/small padding, drop it by 1 level. Adjust via **Custom** if needed.
  {% endhint %}

</details>

#### 3.4. Spacing

<table><thead><tr><th width="102.04296875">Setting</th><th width="200.4921875">Options</th><th width="442.63671875">What it does</th></tr></thead><tbody><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Enables custom margin spacing around the video block, with individual top, bottom, left, and right pixel controls.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate margin values for mobile screens. <em>Only available when <strong>Margin</strong> is On.</em></td></tr></tbody></table>