> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Electro How to use Electro Video banner

**Theme:** Electro · **Section type:** All-template section

A Video banner section plays a looping, muted video as the background of a large banner, with your text, a countdown timer, and buttons on top. Use it to open your homepage or a landing page with motion instead of a still image.

> **Note:** You can add this section to any template, but not to the header or footer. Each section holds 1 Countdown timer block and 1 Buttons block.
![Electro Video banner with a heading, countdown timer, and button over a playing video](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/vb1_1j1a40x.png)

**What you can do**
- Add the section and your video
- Add a separate video for mobile
- Add text, a countdown, and buttons
- Position the content and set the height
- See what customers see
- Look up every setting
- Fix common problems

## Add the section and your video
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Video banner**. The section comes with a Subheading, Heading, Description, Countdown timer, and Buttons block.
3. Under **Main video**, paste a YouTube or Vimeo link into **External video**, or select a **Shopify-hosted video**.
4. Click **Save**.

> **Note:** A Shopify-hosted video overrides the external video. To use a YouTube or Vimeo link, remove the Shopify-hosted video.

> **Tip:** The video plays without sound and without controls, so choose a clip that works silently and has no important text in it.

## Add a separate video for mobile
1. Click the **Video banner** section.
2. Under **Mobile video (optional)**, paste an **External video** link or select a **Shopify-hosted video**.
3. Click **Save**.

If you don't add a mobile video, phones show the main video.

> **Tip:** A portrait (vertical) video fills a phone screen better than a wide one.

## Add text, a countdown, and buttons
1. In the left sidebar, under **Video banner**, click a block to edit it, or click **Add block** and choose **Subheading**, **Heading**, **Description**, **Countdown timer**, or **Buttons**.
2. Drag the blocks to change their order. The banner shows them from top to bottom in the same order.
3. In the **Countdown timer** block, enter an **End date** and an optional **End time**.
4. In the **Buttons** block, enter a **Label** and a **Link** for each button you want. Leave a **Label** empty to hide that button.
5. Click **Save**.

For all countdown options, see Electro Countdown timer.

## Position the content and set the height
1. Click the **Video banner** section.
2. Under **Layout**, choose the **Section height on large screen** and the **Content position on large screen**.
3. Switch to the mobile preview. Choose the **Section height on mobile** and the **Content position on mobile**.
4. Under **General**, drag **Overlay opacity** until the text is easy to read over the video.
5. Click **Save**.

> **Tip:** With a top or bottom content position, the overlay fades toward the text, so the rest of the video stays bright.

## What customers see
- **Video:** the video starts playing on its own, muted and on a loop, behind the content. There are no video controls.
- **Content:** the subheading, heading, description, countdown, and buttons appear in the position you chose, over a dark overlay.
- **Phones:** the mobile video plays if you added one. Otherwise the main video plays. Content uses the mobile height and position.
- **Countdown:** the timer shows days, hours, minutes, and seconds. When it ends, it disappears or shows your end text, depending on your settings.
- **Long content:** if your text doesn't fit, the section grows taller.
![Electro Video banner on a phone, with centered content over the video](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/vb2_hsl9p2.png)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the text and button colors. |
| Overlay opacity | Darkens the video so text is easier to read, from 0 % (no overlay) to 90 %. |
| Custom mask overlay | Sets the color of the overlay. |
| Custom text overlay | Sets the text color over the video. Overrides the color scheme text color. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Section height on large screen | Sets the banner height to 50% screen height, 70% screen height, or Fill screen height. |
| Content position on large screen | Places the content Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |
| Section height on mobile | Sets the banner height on phones to 50% screen height, 70% screen height, or Fill screen height. |
| Content position on mobile | Places the content on phones Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |

### Main video and Mobile video (optional)
| Setting | What it does |
| ---- | ---- |
| External video | A YouTube or Vimeo link. |
| Shopify-hosted video | A video uploaded to Shopify. Overrides the external video. |

### Subheading block settings
| Setting | What it does |
| ---- | ---- |
| Text | A short tagline. |

### Heading block settings
| Setting | What it does |
| ---- | ---- |
| Text | The banner heading. |
| Text size | Sets the heading size: Headline, H1, H2, or H3. |

### Description block settings
| Setting | What it does |
| ---- | ---- |
| Text | Body text. Supports bold, italic, and links. |

### Countdown timer block settings
| Setting | What it does |
| ---- | ---- |
| Hide the countdown when it ends | Removes the timer after the end date and time. |
| End date | The day the countdown ends, in the format YYYY-MM-DD. If it's empty, the countdown ends at midnight tonight. |
| End time (optional) | The time the countdown ends, in the format HH:MM (24-hour clock). |
| End text | A message that shows when the countdown ends. Leave it empty to show nothing. |
| Countdown background | Sets the background color of the timer. |
| Countdown number | Sets the color of the numbers. |
| End text (under Custom color) | Sets the color of the end message. |

### Buttons block settings
| Setting | What it does |
| ---- | ---- |
| Label | The button text, for Button 1 and Button 2. Leave it empty to hide that button. |
| Style | Sets each button to Primary, Secondary, or Tertiary. |
| Link | The page the button opens. |

## Troubleshooting
**The video doesn't change after I paste a new YouTube link.**
A Shopify-hosted video overrides the external video. Remove the **Shopify-hosted video** under **Main video**.

**Phones show a different video than computers.**
A video is set under **Mobile video (optional)**. Change or remove it there.

**The text is hard to read.**
Increase **Overlay opacity**, or set a **Custom text overlay** color that contrasts with the video.

**A button looks faded and can't be clicked.**
The button has no link. Add a **Link** in the **Buttons** block.

**I can't add a second countdown or button group.**
Each section holds 1 **Countdown timer** block and 1 **Buttons** block. The Buttons block has room for 2 buttons.

## Related articles
- [Electro Image banner](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-banner-section-mxjav/)
- [Electro Video with text](https://help.ecomx.co/en/article/electro-how-to-use-electro-video-with-text-section-10nei9v/)
- [Electro Slideshow](https://help.ecomx.co/en/article/electro-how-to-use-electro-slideshow-1k0sydt/)
- [Electro Countdown timer](https://help.ecomx.co/en/article/electro-countdown-timer-7xh0wl/)
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)