> 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-with-text-overlay.md).

# Video with text overlay

**Video with text overlay** turns a clip into the background of a banner and places a heading, a sentence, and a button on top of it. It is the section for a hero that needs movement: a campaign film behind a seasonal message, a workshop clip behind a brand promise, a product in use behind a call to action. Shoppers meet it at the top of the homepage or as a full width break partway down a landing page.

The clip plays behind the wording rather than being watched on its own, so keep it short, calm, and legible under an overlay. When the footage itself is the point, use [Video](/velare/customize-your-pages/banners/video.md) instead.

<figure><img src="/files/RT0NlAQHllEz5RIZVnZZ" 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. Open the template where the banner should appear, usually the homepage.
3. Click **Add section** and choose **Video with text overlay** from the **Banners** group.
4. Paste a video link, or upload a file and select it under **Video local**.
5. Add the heading and button blocks, then raise **Overlay opacity** until the wording is comfortable to read against the moving footage.
   {% endhint %}

*Result:* the clip fills the banner and the wording sits over it, positioned by the content settings below.

### Section settings <a href="#section-settings" id="section-settings"></a>

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

| Setting           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width** | <p>How far the banner spreads across the screen.</p><ul><li><strong>Stretch width</strong>: the footage runs close to both screen edges whatever the screen size.</li><li><strong>Fixed width</strong>: the banner lines up with the page width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the banner fills the whole browser window and resizes with it, the usual choice for a hero.</li></ul> |
| **Color scheme**  | The colours used for the wording and button laid over the clip. Schemes are defined in **Theme settings > Colors**, so pick one whose text colour holds up against the brightest frame of your footage.                                                                                                                                                                                                                                     |

#### Video <a href="#video" id="video"></a>

| Setting             | Description                                                                                                                                                       |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Video link**      | The address of a clip hosted elsewhere, for example on YouTube or Vimeo, used when you would rather not store a large file on the shop.                           |
| **Video local**     | A clip uploaded to your Shopify files, sharpest at ***(1392px x 550px recommended)***. It plays without a third party player, which keeps the banner clean.       |
| **Video poster**    | The still image shown before playback starts. Choose a frame with the same calm area the wording will sit over, so the banner does not jump when the clip begins. |
| **Video alt text**  | A short written description of the clip, read aloud by screen readers. Say what happens in the footage, not that it is a video.                                   |
| **Overlay opacity** | Darkens the footage behind the wording. Raise it when bright or changing scenes make the heading flicker in and out of legibility.                                |
| **Video height**    | How tall the banner is. A taller banner commands the whole first screen, a shorter one lets shoppers reach the content below it sooner.                           |

#### Content settings <a href="#content-settings" id="content-settings"></a>

| Setting                      | Description                                                                                                                                                                                                                                                                                                              |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Desktop content position** | Which part of the frame the wording sits over on wide screens. Pick an area that stays calm through the whole clip, not just the opening second.                                                                                                                                                                         |
| **Content alignment**        | <p>Where each line starts inside the text block.</p><ul><li><strong>Left</strong>: easiest to read for more than a few words.</li><li><strong>Center</strong>: the classic hero look for a short headline and one button.</li><li><strong>Right</strong>: use when the action in the clip happens on the left.</li></ul> |
| **Max width**                | How wide the block of wording is allowed to grow. Keeping it narrower than the banner stops a long headline from stretching edge to edge over the footage.                                                                                                                                                               |
| **Padding inline**           | Space to the left and right inside the text block. Increase it when the wording touches the edge of the banner on smaller screens.                                                                                                                                                                                       |
| **Padding block**            | Space above and below inside the text block. Increase it when heading, description, and button feel packed together.                                                                                                                                                                                                     |

#### Mobile layout <a href="#mobile-layout" id="mobile-layout"></a>

| Setting                             | Description                                                                                                                                                                                                                                                                                                                          |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Show text below video on mobile** | Moves the wording out from over the clip and places it underneath on phones. Turn it on when moving footage makes the heading hard to read on a small screen.                                                                                                                                                                        |
| **Content alignment**               | <p>Where each line starts on phones, set separately from desktop.</p><ul><li><strong>Left</strong>: the safest for a heading that wraps onto several lines.</li><li><strong>Center</strong>: keeps a short headline and button balanced.</li><li><strong>Right</strong>: use only to match footage whose action sits left.</li></ul> |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                                                                        |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| **Top**    | Space added above the banner. Set it to zero when the banner is the first thing on the page and should sit tight under the header. |
| **Bottom** | Space added below the banner. Increase it when the next section feels cramped against it.                                          |

#### Section divider <a href="#section-divider" id="section-divider"></a>

| Setting          | Description                                                                                                                                    |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show divider** | Draws a thin horizontal line at the section edge, useful when this banner and its neighbour share a background colour and run into each other. |

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

#### Heading, Subheading, Description <a href="#heading-subheading-description" id="heading-subheading-description"></a>

| Setting                              | Description                                                                                                                                                                                                                                                                   |
| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading, Subheading, Description** | The three pieces of wording over the clip: the line shoppers read first, a short label above it for context, and a sentence below spelling out the offer.                                                                                                                     |
| **Width**                            | <p>How much horizontal room the wording takes inside the text block.</p><ul><li><strong>Fit</strong>: the text stays only as wide as the words themselves.</li><li><strong>Fill</strong>: the text spans the full width of the block, which suits longer sentences.</li></ul> |
| **Typography - Preset**              | The font, size, and weight of the wording, taken from the presets in **Theme settings > Typography**. A heavier preset stands up better over moving footage than a light one.                                                                                                 |
| **Background**                       | Puts a solid panel behind the wording. Turn it on when overlay opacity alone cannot keep the heading readable across every frame of the clip.                                                                                                                                 |
| **Background color**                 | <p>The colour of that panel. Pick one with enough contrast against the wording, or you gain a panel and lose the readability you added it for.</p><p><em>Note: only appears when <strong>Background</strong> is enabled.</em></p>                                             |
| **Corner radius**                    | <p>How rounded the corners of that panel look. Higher values soften the shape, 0 keeps the corners square.</p><p><em>Note: only appears when <strong>Background</strong> is enabled.</em></p>                                                                                 |
| **Padding top/bottom**               | Breathing room above and below the wording. Increase it when the text presses against the edge of its panel.                                                                                                                                                                  |

#### Button <a href="#button" id="button"></a>

| Setting            | Description                                                                                                                                                                                                                                                                                                                                   |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button label**   | The words shoppers click. Leave it empty and no button is shown at all, which turns the hero into footage with no next step.                                                                                                                                                                                                                  |
| **Button link**    | Where that click takes shoppers, usually the collection or campaign page the film is about.                                                                                                                                                                                                                                                   |
| **Button type**    | <p>How much the button stands out over the footage.</p><ul><li><strong>Primary</strong>: solid and filled, the safest choice over moving images.</li><li><strong>Outline</strong>: bordered and lighter, for a secondary action.</li><li><strong>Link</strong>: plain underlined text, which is easily lost against a bright scene.</li></ul> |
| **Spacing bottom** | Space left under the button. Increase it when the button sits too close to the bottom edge of the banner.                                                                                                                                                                                                                                     |

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

* Shoppers see the clip filling the banner with the wording over it, or beneath it on phones when **Show text below video on mobile** is on.
* **Overlay opacity** darkens the whole frame, not only the area behind the text, so it changes the mood of the footage as well as its readability.
* The poster image is what shoppers see on slow connections, so treat it as part of the design rather than a placeholder.

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

* [Banners](/velare/customize-your-pages/banners.md): the group this section belongs to
* [Video](/velare/customize-your-pages/banners/video.md): the version where the clip is watched on its own instead of used as a background
* [Image with text overlay](/velare/customize-your-pages/banners/image-with-text-overlay.md): the same layout with a still photo behind the wording
* [Colors](/velare/set-up-your-store/colors.md) and [Typography](/velare/set-up-your-store/typography.md): where the schemes and font presets 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-with-text-overlay.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.