> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/storytelling/multi-content/theme-block-video.md).

# Group block - Video

**Video** puts a moving clip into a [Multi-content](/velare/customize-your-pages/storytelling/multi-content.md) row: a product in use, a workshop, a founder talking, or a campaign film. It shows more in a few seconds than a still image can, which makes it the block to reach for when what you sell is easier to understand in motion than in a photograph. You can host the clip in Shopify or point at one already published elsewhere, and a poster image covers the frame until it plays.

<figure><img src="/files/d6uFYUPS4LEnWKNzBBog" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the **Multi-content** section.
3. Click **Add block** and choose **Video**.
4. Either paste a video URL or select a hosted video, then add a poster image.
   {% endhint %}

*Result:* the clip takes its place as one column of the row, showing the poster image until it starts playing.

### Settings <a href="#settings" id="settings"></a>

#### General <a href="#general" id="general"></a>

<figure><img src="/files/SDXS6jzJMOtTXHXEhXc7" alt=""><figcaption></figcaption></figure>

<table data-search="false"><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Video URL</strong></td><td>The address of a clip already published elsewhere, which keeps the file off your store and out of your bandwidth.</td></tr><tr><td><strong>Video local</strong></td><td>A clip uploaded to Shopify instead, which avoids the branding and suggested videos that come with an external player.<br><em>* Note: when set, this takes priority over the Video URL above. <strong>(684px x 500px recommended)</strong></em></td></tr><tr><td><strong>Video poster</strong></td><td>The still frame shoppers see before the clip plays. Choose a frame that makes sense on its own, because many shoppers never press play.</td></tr><tr><td><strong>Video autoplay</strong></td><td>Starts the clip on its own as soon as it comes into view. It catches the eye, but it also loads the file for every visitor, so keep it for short clips.</td></tr><tr><td><strong>Video looping</strong></td><td>Restarts the clip when it ends, which suits a short atmospheric shot and annoys on anything with a beginning and an end.</td></tr><tr><td><strong>Video alt text</strong></td><td>A short sentence describing what happens in the clip, read out by screen readers and used by search engines.</td></tr><tr><td><strong>Aspect ratio</strong></td><td><p>The shape of the video frame in the row.</p><ul><li><strong>16:9</strong>: the standard widescreen shape, safe for most footage.</li><li><strong>21:9</strong>: a wider cinematic band, shorter in height.</li><li><strong>Adapt to video</strong>: keeps whatever shape the file already has, with no cropping.</li></ul></td></tr></tbody></table>

#### Block settings <a href="#block-settings" id="block-settings"></a>

<figure><img src="/files/pMM8XMFdZ23bXG8pvvtz" alt=""><figcaption></figcaption></figure>

<table data-search="false"><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Vertical alignment</strong></td><td><p>Where the clip sits against the taller blocks beside it.</p><ul><li><strong>Top</strong>: lines its top edge up with its neighbours.</li><li><strong>Middle</strong>: centres it, the safest choice when block heights differ.</li><li><strong>Bottom</strong>: drops it so the bottom edges match.</li></ul></td></tr><tr><td><strong>Width</strong></td><td>Controls how much horizontal space the video block occupies within the row. Choose a wider value to make the video more prominent, or a narrower one to leave more room for neighbouring blocks.</td></tr></tbody></table>

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* The poster image is what most shoppers actually judge the block by, since many of them never press play.
* Without a poster image, shoppers see an empty frame until the clip loads, which is most noticeable on slow connections.
* Autoplaying video is the heaviest thing on a page. One autoplaying clip per template is usually the limit before the page feels slow.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Multi-content](/velare/customize-your-pages/storytelling/multi-content.md): the section this block belongs to
* [Group block - Media with text](/velare/customize-your-pages/storytelling/multi-content/theme-block-media-with-text.md): use it when the clip needs a heading and a button on top
* [Video](/velare/customize-your-pages/banners/video.md): the full width section version, for a clip that should carry a whole band of the page


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/storytelling/multi-content/theme-block-video.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.