# Video banner

Fully customizable video banner section with options for mobile and desktop devices including support for multiple buttons, heading styles, and text options:

<div data-full-width="true"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FieGrqzwPOiGOWSfwBrvN%2FKapture%202023-07-21%20at%2001.24.45.gif?alt=media&#x26;token=e3abfdab-6261-4f33-a765-65d652159456" alt=""><figcaption></figcaption></figure></div>

Display a banner-style looping MP4 video for desktop and mobile. Customize with optional blocks to display text, headings, buttons, and pop-up YouTube or Vimeo videos.

### How to use

Overview of how to customize and configure the settings in the Video banner section:

{% embed url="<https://www.loom.com/share/62f3a96528b34d65ba99fefc96c76b18?sid=68495632-f143-44a6-a619-d41a6d8387b1>" fullWidth="false" %}

### Blocks

These blocks power the customization options in the Pipeline Video banner section. Add multiple blocks and organize the layout order to build the exact banner video section for your store.

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Kicker</strong></td><td>Styled subheading text with size options</td></tr><tr><td><strong>Heading</strong></td><td>Styled heading with size options</td></tr><tr><td><strong>Text</strong></td><td>Standard body text with sizing</td></tr><tr><td><strong>Video popup</strong></td><td>Popup modal with support for YouTube and Vimeo videos</td></tr><tr><td><strong>Buttons</strong></td><td>Custom horizontal buttons with sizes and styles</td></tr><tr><td><strong>Spacer</strong></td><td>Add extra padding and line</td></tr></tbody></table>

### Video banner as an image banner

> *Tip*: The video banner can also be used as a regular image-style banner section

{% embed url="<https://www.loom.com/share/b8a552c0a35c4eeea4d22f2b8de77452?sid=f1ac7e59-29bc-496d-994f-8c123305edb0>" fullWidth="false" %}

> ***Tip:*** To fix the top gap when using a transparent header, adjust the Video banner section settings to `0px` for Padding top:

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FXgn5BrGOvk6DIlvIh8Uj%2Fvideo%20banner%20top%20gap.png?alt=media&#x26;token=f1e7e67c-68ec-40d6-9b2e-7f03a1ccc528" alt=""><figcaption></figcaption></figure>