> 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/blocks/video.md).

# Video

Embed uploaded or external videos with autoplay, looping, custom sizing, and visual styling options.

The Video block lets you embed video content directly into any section on your storefront — whether it's uploaded to Shopify or hosted on YouTube or Vimeo. Use it for product demonstrations, brand stories, campaign trailers, how-to guides, or atmospheric background video.

Video is one of the most engaging content types for online stores. It captures attention, communicates product details quickly, and helps customers feel confident about their purchase.

### 1. What you can do

* Embed videos from your Shopify files, YouTube, or Vimeo
* Set videos to autoplay and loop for background or atmospheric effects
* Show or hide player controls (play/pause, timeline, volume)
* Add a cover image that displays before the video starts playing
* Control aspect ratio, corner rounding, and width for desktop and mobile
* Apply visual filters and overlays on top of the video

***

### 2. Where you can use this block

| Section                | Maximum per section |
| ---------------------- | ------------------- |
| **Any Custom Section** | Unlimited           |

***

### 3. How to add this block

1. In the **Theme Editor (Customize)**, click the section where you want to add a video.
2. Click **Add block**.
3. Select **Video** from the block list.
4. Choose your video source and upload or link your video.
5. Adjust the settings below to control appearance and behavior.
6. Click **Save**.

***

### 4. Block settings

These settings let you control the video source, playback behavior, sizing, and visual styling.

#### Source

**Source**

Choose where your video is hosted.

| Option           | Description                                                                                                                         |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| **Uploaded**     | Select an MP4 video from your Shopify file library. Best for short product videos and background loops where you want full control. |
| **External URL** | Paste a YouTube or Vimeo link. Best for longer content like tutorials, brand stories, or campaign videos.                           |

***

**Video / URL**

Depending on your **Source** selection:

* For *Uploaded*: Select a video file from your Shopify file library.
* For *External URL*: Paste the full YouTube or Vimeo URL.

{% hint style="success" icon="lightbulb" %}
**Tip:** For uploaded videos, use MP4 format with H.264 encoding for the best cross-browser compatibility. Keep file sizes under 20 MB for fast loading.
{% endhint %}

***

**Cover image**

A static image that displays before the video starts playing. This replaces the default black or loading screen, giving customers a polished preview of the video content.

{% hint style="success" icon="lightbulb" %}
**Tip:** Always add a cover image, especially for videos that don't autoplay. A well-chosen cover image tells customers what the video is about and encourages them to press play.
{% endhint %}

***

**Enable video autoplay**

When enabled, the video starts playing automatically as soon as it scrolls into view. This creates a dynamic, engaging experience without requiring customers to click play.

{% hint style="info" icon="note-sticky" %}
**Note:** Modern browsers require autoplay videos to be muted. When you enable autoplay, the video will always play silently. Customers can unmute it using the player controls (if enabled).
{% endhint %}

***

**Enable media controls**

Shows the video player controls — play/pause, timeline scrubber, volume, and fullscreen buttons.

{% hint style="success" icon="lightbulb" %}
**Tip:** Enable controls for content customers need to watch actively (product demos, tutorials). Disable controls for atmospheric background videos where you want a clean, uninterrupted visual.
{% endhint %}

***

**Enable video loop**

When enabled, the video automatically restarts from the beginning when it reaches the end. Essential for background videos and visual loops that should play continuously.

***

#### Layout

**Orientation and Aspect ratio**

Controls the video's visible shape, cropping it to a specific ratio regardless of the original video dimensions.

| Option        | Description                                                              |
| ------------- | ------------------------------------------------------------------------ |
| **Auto**      | Displays the video at its original aspect ratio.                         |
| **Portrait**  | Vertical format with ratios like 9:16 (ideal for mobile-style content).  |
| **Landscape** | Horizontal format with ratios like 16:9 (standard cinematic widescreen). |
| **Square**    | 1:1 square crop.                                                         |

{% hint style="success" icon="lightbulb" %}
**Tip:** Most professional videos are shot in 16:9 landscape format. If you're unsure, start with *Landscape* and adjust only if the video composition requires it.
{% endhint %}

***

**Width**

Controls how much horizontal space the video occupies.

| Option     | Description                                                     |
| ---------- | --------------------------------------------------------------- |
| **Fill**   | The video stretches to fill the available width.                |
| **Custom** | Set an exact width in pixels or percentage for precise control. |

***

**Custom on mobile**

When enabled, you can set a different aspect ratio and width specifically for mobile devices. This is useful when a wide landscape video on desktop should display as a taller portrait format on phones.

***

#### Style

**Corner radius**

Controls how rounded the corners of your video player appear.

**Options:** *Main corner / Small / Extra small / None / Custom*

***

**Filter presets**

Apply visual effects to your video without using editing software.

| Option            | Description                         |
| ----------------- | ----------------------------------- |
| **Warm**          | Adds golden, warm tones.            |
| **High Contrast** | Deepens darks and brightens lights. |
| **Grayscale**     | Converts to black and white.        |
| **Vintage**       | Adds a faded, retro look.           |

***

**Overlay**

Adds a semi-transparent layer on top of the video. This is especially useful when you have text or buttons displayed over the video — the overlay ensures they remain readable regardless of the video content.

You can choose a **Solid** color overlay or a directional **Gradient**, and adjust the opacity to your preference.

{% hint style="success" icon="lightbulb" %}
**Tip:** For background videos with text on top, use a dark overlay at around 30–50% opacity. This keeps the text readable while still allowing the video to show through.
{% endhint %}

***

#### Spacing

**Custom padding and margin**

Controls the spacing around the video block. Padding creates space inside the block boundaries, while margin creates space between this block and neighboring elements.

***

### 5. How to use it effectively

#### Creating an atmospheric background video

For a hero section with a looping background video:

1. Add a Video block inside a **Banner** block (or use the Banner's built-in video feature).
2. Upload a short (10–20 second) looping video clip.
3. Enable **Autoplay** and **Loop**, and disable **Media controls**.
4. Add an **Overlay** to ensure any text on top stays readable.
5. Set the **Aspect ratio** to *Landscape 16:9* for cinematic impact.
6. Enable **Custom on mobile** and consider a taller ratio for phone screens.

#### Embedding a product demo

For a product video that customers watch actively:

1. Add a Video block and paste your YouTube or Vimeo URL.
2. Enable **Media controls** so customers can play, pause, and scrub.
3. Add a compelling **Cover image** that shows the product.
4. Keep autoplay disabled — let customers choose when to watch.