> 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/banners/video.md).
# Video
**Video** gives a single clip its own place on the page, with a heading and a short description above it. Use it when the video is the content rather than a backdrop: a product demo, a how it is made film, a founder introduction, or a campaign trailer. Shoppers meet it as a self contained block on the homepage or a landing page, and they can play it, or watch it start on its own if you enable autoplay.
The clip can come from a hosted URL such as YouTube or Vimeo, or from a file uploaded to your Shopify files, and a poster image stands in until playback begins.
### Where to find it
{% hint style="success" %}
**Steps:**
1. Go to **Online Store > Themes > Customize**.
2. Open the template where the video should appear, for example the homepage.
3. Click **Add section** and choose **Video** from the **Banners** group.
4. Paste a video URL, or upload a file and select it under **Video local**.
5. Add a poster image and alt text, then set the aspect ratio to match your footage.
{% endhint %}
*Result:* the poster image is shown in the section until a shopper presses play, or immediately replaced by the clip when autoplay is on.
### Section settings
#### General settings
| Setting | Description |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** |
How far the section spreads across the screen.
Stretch width: the video runs close to both screen edges whatever the screen size.
Fixed width: the video lines up with the page width set in Theme settings > Layout, so it matches the sections around it.
Full width: the section fills the whole browser window and resizes with it.
|
| **Color scheme** | The background and text colours used behind the heading and the player. Schemes are defined in **Theme settings > Colors**, so a darker scheme is a simple way to make the footage stand out. |
#### Section header
| Setting | Description |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading** | The line above the player that tells shoppers what they are about to watch, for example `How we make it`. |
| **Description** | A sentence under that line, usually the reason to press play or the length of the clip. |
| **Heading size** |
How large that line is rendered.
Heading 1: the biggest, when the video is the main event on the page.
Heading 2: a middle size that suits most placements.
Heading 3: the smallest, for a video that supports the content around it.
|
| **Alignment** |
Where the heading and description sit above the player.
Left: reads naturally and lines up with the left edge of the video.
Center: balanced over a wide player, the common choice.
Right: rarely needed, use it to mirror a neighbouring section.
|
#### Video
| Setting | Description |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| **Video URL** | The address of a clip hosted elsewhere, for example on YouTube or Vimeo. Use this to keep large files off your store. |
| **Video local** | A clip uploaded to your Shopify files, used instead of a hosted URL. It plays without a third party player, which suits short product footage. |
| **Video poster** | The still image shown before playback starts. Choose a frame that makes the clip look worth watching, since this is what shoppers judge it by. |
| **Video alt text** | A short written description of the clip, read aloud by screen readers. Say what happens in the video, not that it is a video. |
| **Video auto play** | Starts the clip on its own when the section comes into view, without the shopper pressing anything. Use it only for short, quiet footage. |
| **Video looping** | Restarts the clip when it finishes instead of stopping on the last frame. Suits an ambient product shot, not a film with an ending. |
| **Aspect ratio** | The shape of the player frame. Match it to your footage, otherwise the clip is letterboxed or cropped inside the frame. |
#### Section padding
| Setting | Description |
| ---------- | ---------------------------------------------------------------------------------------------------- |
| **Top** | Space added above the section. Increase it when the heading sits too close to whatever comes before. |
| **Bottom** | Space added below the section. Increase it when the next section feels cramped against the player. |
#### Section divider
| Setting | Description |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| **Show divider** | Draws a thin line between this section and the one above it, useful when both share the same background colour and the join is invisible. |
### What changes on the storefront
* Shoppers see the heading, the description, and the poster image, and the clip replaces the poster once it plays.
* With **Video auto play** on, the clip starts without a click. Many browsers only allow this when the video is muted, so do not rely on the soundtrack to carry the message.
* A missing **Video poster** leaves the player looking blank before playback, which reads as a broken section.
### Related pages
* [Banners](/velare/customize-your-pages/banners.md): the group this section belongs to
* [Video with text overlay](/velare/customize-your-pages/banners/video-with-text-overlay.md): the version that turns the clip into a background with wording on top
* [Shopable video](/velare/customize-your-pages/shopables/shopable-video.md): for footage shoppers should be able to buy from
* [Colors](/velare/set-up-your-store/colors.md) and [Layout](/velare/set-up-your-store/layout.md): where the schemes and page width come from
---
# 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/banners/video.md?ask=&goal=
```
`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.