# Video banner

You can add informational content blocks and guide customers with customizable buttons, making this section ideal for highlighting brand stories, product demonstrations, or seasonal promotions.

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

{% hint style="info" %}
**Note**: If you’d like to add a video with sound, please refer to the [Video](/section/video.md) section article for instructions.
{% endhint %}

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Video banner** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** allow you to choose the video source, adjust height, and configure the mobile display options.

* **Shopify-hosted video**: Upload a video directly to your Shopify store, where it will be hosted and autoplay in the banner.
* **External video**: Add a link from **YouTube** or **Vimeo** to embed an external video.

{% hint style="info" %}
**Note**: *If both Shopify-hosted and external videos are set, the Shopify-hosted video will take priority.*
{% endhint %}

* **Video overlay opacity:** Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.
* **Overlay style:** Select an overlay effect to style the video banner:  Gradient from bottom, Gradient from top or Full video darken.
* **Video description:** Add a short text description of your video. This description is important for accessibility—it helps screen readers describe the video content to visually impaired users.
* **Desktop section height**: Set the height of the video banner on desktop: **Small**, **Medium**, **Large**, **Full screen**. Selecting **Full screen** expands the video banner to the full height of the screen.
* **Adapt section height to video size:** this setting ensures the section height automatically adjusts to fit the full height of the video—preventing the video from being cut off.
  * **None**: The section height stays fixed based on your choices in the *Desktop section height* & *Mobile section height setting.*
  * **On desktop**: Adjusts the section height to fit the video only on desktop devices.
  * **On mobile**: Adjusts the section height to fit the video only on mobile devices.
  * **On all devices**: Automatically resizes the section height to match the video across all screen sizes.
* **Text** settings: Customize the layout of your text content on desktop:
  * **Desktop content position**: Controls where the overlay text appears on the video: *Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right.*
  * **Desktop content width**: Adjusts the width of the text container: *Small, Medium, Large.*&#x20;
* **Mobile layout settings**:
  * **Mobile section height**: Choose the height of the video on mobile devices, with options ranging from **Small** to **Full screen**.
  * **Mobile content alignment**: Adjust the alignment of text content on mobile.

### **3, Block settings**

The Video banner section supports several blocks to add customized content such as headings, descriptions, captions, and buttons.

* **Heading block:** Add a heading for the Video banner section. Choose from the default font or select another from the Shopify font library for heading font. Adjust the heading size from **Small** to **Extra extra large**. Highlight specific keywords in the heading with: **Color**: Change the highlight color or **Underline**: Add an underline to highlighted text.
* **Text block:** Add a description or supporting text to provide additional information under the heading.
* **Caption block:** Add a caption for more detailed content. Customize the caption style to either **Uppercase** or **Subtitle**.
* **Buttons block:** Add buttons to guide customers to other parts of the store.&#x20;
  * Enter a label and assign a link to each button. If left blank, the button won’t display.
  * **Button style**: Choose from styles such as **Solid**, **Outline**, or **Text**.
  * Customize button color based on available options.
* **Collections block**: Showcase a curated list of collections within the Image banner section.
  * **Collections:** Select up to six collections to display in the block.
  * **Color:** Allow you to set a custom text color, replacing the default white text.


---

# Agent Instructions: 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:

```
GET https://help.byinspiredlabs.com/section/video-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.