> 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/basic/video.md). # Video The **Video** block puts moving footage inside a section, either a YouTube or Vimeo link or a file you upload to Shopify. It is added inside a section next to the wording it supports, which makes it the right block for a product demo, a fabric close up, or a short brand film that a photograph cannot carry. Uploaded video gives you a poster image and autoplay control, while an external link keeps the file off your store.
### How to add it {% hint style="success" %} **Steps:** 1. Go to **Online Store > Themes > Customize**. 2. In the left sidebar, click the section you want to add the video to. 3. Click **Add block** and choose **Video**. 4. Pick a **Source**, then paste the link or upload the file. 5. Choose an **Aspect Ratio** and set the width for desktop and mobile. {% endhint %} *Result:* the video appears in the section inside a frame of the ratio you chose, ready to play in the preview. ### General settings | Setting | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Source** |

Where the footage comes from:

| | **Video URL** |

Only visible when Video Source is External Link.

The address of the clip on YouTube or Vimeo. Paste the normal page link, not an embed snippet.

| | **Local Video** |

Only visible when Video Source is Uploaded Video.

The video file itself, held in Shopify rather than on an outside platform.

| | **Video Poster** |

Only visible when Video Source is Uploaded Video.

The still picture shoppers see before playback starts. Without one, the frame sits empty while the file loads.

| | **Video auto play** | Starts the footage on its own as the page loads, so shoppers see movement without clicking. Default is checked. Turn it off for clips with a spoken message, since browsers keep autoplaying video muted. | | **Video Looping** | Restarts the footage as soon as it ends, which suits a short atmospheric clip and annoys shoppers on a long one. | | **Video alt text** | A written description of what happens in the footage, read out to shoppers using a screen reader. | | **Aspect Ratio** |

The shape of the frame the footage plays in. Options include:

| | **Video width (Desktop)** | How much of the section width the frame takes on a computer screen, as a percentage. Drop it below 100% when the video should sit beside wording rather than above it. | | **Mobile width (Mobile)** | The same share on phones, from 1% to 100%. Keep it high, since a small video frame on a phone is hard to watch. | | **Corner Radius** |

How rounded the corners of the video frame look. Options include:

| | **Custom Radius** |

Only visible when Corner Radius is Custom.
- The exact rounding for this frame, from 0px to 100px.

| ### Spacing These settings control the external spacing (padding) applied directly above and below this specific block. | Setting | Description | | ---------- | ------------------------------------------------------------------------------------------------------------ | | **Top** | Adds space above the video frame so it does not sit tight against the wording over it. Accepts 0px to 100px. | | **Bottom** | Leaves space under the frame before the next block starts. Accepts 0px to 100px. | ### What changes on the storefront * Shoppers can watch the product in use inside the section, without leaving the page. * An external link loads the clip from YouTube or Vimeo with that platform's player, while an uploaded file plays in the theme's own frame. * Autoplay footage draws the eye as the page loads, which is why a clip carrying spoken information is better left for the shopper to start. ### Related pages * [Image](/velare/customize-your-pages/basic/image.md): the still alternative when motion is not needed * [Group](/velare/customize-your-pages/layout/group.md): the container for placing a video beside its wording, including video used as a background * [Basic](/velare/customize-your-pages/basic.md): the rest of the content blocks in this group --- # 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/basic/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.