> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/sections/banners/video-banner.md).

# Video banner

A full-width hero with a looping background video, your heading and buttons on top, and optional pause and mute controls.

Video banner does what Image banner does, with motion instead of a still. It suits products that are hard to photograph — fabric that moves, a machine at work, a room being used — and it holds attention at the top of a page far longer than a photograph.

### How to add

{% stepper %}
{% step %}

#### Add the section

In the theme editor, click **Add section → Video banner**.
{% endstep %}

{% step %}

#### Upload the video

Open **Loop video → Video** and pick a file from your Shopify files. It plays on its own, muted and on loop.
{% endstep %}

{% step %}

#### Set the height

**Height mode → Percents** is the default — 70% of the screen height on desktop, 60% on mobile. **Pixels** fixes the height between 500 and 1600 px. **Adapt to video** lets the file's own proportions set it.
{% endstep %}

{% step %}

#### Add your content

Add **Subheading**, **Heading**, **Text** and **Button** blocks, then place them with **Center text**, **Vertical content position** and **Horizontal content position**.
{% endstep %}

{% step %}

#### Darken the footage

Video is busier than a photo. Raise **Video overlay opacity** (70% by default) until the heading holds up against the brightest frame, not the average one.
{% endstep %}

{% step %}

#### Decide about controls

**Video controls → Enable pause control** lets visitors stop the loop; **Enable mute control** lets them turn the sound on. Both are off by default. **Horizontal position** puts the buttons on the left, in the center, or on the right.
{% endstep %}
{% endstepper %}

### Good to know

**The video is the same on every screen.** Video banner has no separate mobile video field — only a mobile **Height** and **Show content under video**. If you need different footage on phones, use a **Loop video** slide in [Slideshow with media](/docs/avante-themes/sections/banners/slideshow-with-media.md), which has both **Video** and **Mobile video**.

**Sound never starts on its own.** Browsers only autoplay muted video, so the loop is silent until a visitor taps the mute control. Plan the footage to work without audio.

**Section width defaults to Wide**, not full-width, so by default the video sits inside the page container with the theme's rounded corners. Switch to **Full-width** for an edge-to-edge hero.

**Show content only on hover** reveals the text on cursor-over. On touch devices there is no hover, so the content is always visible.

{% hint style="warning" %}
A heavy video file is the most common cause of a slow homepage. Compress before uploading and keep the loop short — a few seconds that loop cleanly beats thirty seconds that load slowly. See [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md).
{% endhint %}

{% hint style="info" %}
For a video hero under a see-through navigation bar, set **Section width** to **Overlap by navigation** and turn the header transparent for that template. See [Transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md).
{% endhint %}

**Content blocks.** Video banner takes the same shared content blocks as Image banner — Subheading, Heading, Inline image reveal, Text, Collapsible tab, Button, Context image, Image, Empty space, Line, Video button, Promo code and Countdown timer. See [Common blocks](/docs/avante-themes/sections/overview.md#common-blocks).

**Background animation.** Leave **Animation** on **Default** to follow [Theme settings → Animation](/docs/avante-themes/theme-settings/animation.md), or **Customize** to give this banner its own **On scroll** effect. See [Background animation](/docs/avante-themes/features-and-advanced-setup/background-animation.md).

### Customization ideas

* Turn on **Show content under video** for mobile so the full frame is visible and the copy sits beneath it — useful when the footage has a subject in the center.
* Add a **Video button** block to open a longer film in a popup while the background keeps looping.
* Use **Height mode → Pixels** at 500 px for a narrow motion strip between product sections.
* Pair a muted ambient loop with a **Promo code** block for a campaign landing page.

### Best practices

* Export at the size you need rather than relying on the browser to scale down a 4K master.
* Avoid hard cuts in a loop — a slow continuous shot reads as deliberate, a cut reads as a glitch.
* Enable the pause control on long or high-contrast footage; some visitors find constant motion tiring.
* Keep the first frame usable on its own — it is what shows while the file is still loading.

***

### Related

* [Image banner](/docs/avante-themes/sections/banners/image-banner.md)
* [Slideshow with media](/docs/avante-themes/sections/banners/slideshow-with-media.md)
* [Background animation](/docs/avante-themes/features-and-advanced-setup/background-animation.md)
* [Transparent header](/docs/avante-themes/features-and-advanced-setup/transparent-header.md)
* [Image & video size recommendations](/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md)
* [Common section settings](/docs/avante-themes/sections/overview.md#common-section-settings)


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/avante-themes/sections/banners/video-banner.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.