> ## 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).

# Shine Video Banner

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

A Video banner section plays a looping background video across the full width of the page, with a heading, text, buttons, and an optional countdown on top. Use it to set the mood of your store or to show a product in action.

> **Note:** You can add this section to any template, except the header and footer. The video can come from YouTube, Vimeo, or your Shopify files. The section comes with a Subheading, Heading, Description, Buttons, and Countdown timer block. Each section holds 1 Countdown timer.
![Video banner playing a background video](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/video-banner-1_1nhruk9.jpg)

**What you can do**
- Add the section and your video
- Add your text and buttons
- Add a countdown timer
- Make the text easy to read
- See what customers see
- Change the height and content position
- 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**.
3. Under **General**, choose a **Video source**: **External** or **Shopify-hosted**.
4. For **External**, paste a YouTube or Vimeo link in **External video**.
5. For **Shopify-hosted**, select or upload a video in **Video hosted**.
6. Click **Save**.

> **Tip:** Use a short clip without important sound or captions. The video plays in the background without controls, so customers can't turn the sound on or pause it.

## Add your text and buttons
1. Click the **Heading** block and enter the **Text**. To highlight part of the heading, put it between **\[** and **]**.
2. Choose a **Heading size**.
3. Click the **Subheading** and **Description** blocks and enter their text.
4. Click the **Buttons** block. Under **Button 1**, enter the button text, choose a **Style**, and select a **Link**.
5. Optional: set up **Button 2** the same way.
6. To change the order of the text and buttons, drag the blocks in the left sidebar.
7. Click **Save**.

To make the whole banner clickable instead, remove the **Buttons** block. Then click the section and, under **Link**, select a **Link**.

> **Note:** The section **Link** is inactive while the section has a **Buttons** block, even if the button text is empty.

## Add a countdown timer
1. Click the **Countdown timer** block. If the section doesn't have one, click **Add block** > **Countdown timer**.
2. Enter an **End date** in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight.
3. Optional: enter an **End time** in the format HH:MM (24-hour clock).
4. Select **Hide the countdown when it ends** to remove it after the end date, or clear it to keep it on the banner.
5. Optional: enter an **End text** to show when the countdown ends.
6. Click **Save**.

> **Caution:** A countdown that has ended can mislead customers. Update the end date or remove the block after the promotion ends.

## Make the text easy to read
1. Click the **Video banner** section.
2. Under **Custom color**, select a **Mask overlay** color. If you don't select one, the overlay uses the background color of the section's color scheme.
3. Drag **Overlay opacity** to darken or lighten the video, from 0 % to 90 %.
4. Optional: select a **Text overlay** color to change the color of the banner text.
5. Click **Save**.

## What customers see
- **Video:** the video loads when the banner scrolls into view, then plays on a loop and fills the banner. YouTube and Vimeo videos play muted. There are no play, pause, or sound controls.
- **Phones and tablets:** below 1025 px, the **Mobile screen** height and content position apply. The video is cropped to fill the banner.
- **Buttons and link:** customers click a button to open its link. If the section has no **Buttons** block, clicking anywhere on the banner opens the section's **Link**.
- **Countdown:** the timer counts down the days, hours, minutes, and seconds to the end date. When it ends, it disappears or shows 00, depending on **Hide the countdown when it ends**, and the end text appears if you added one.
![Video banner on mobile](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/video-banner-2_1mh7r9t.jpg)

## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color schemes | Sets the colors of the section. You edit color schemes in Theme settings > Colors. |
| Video source | Chooses where the video comes from: External (YouTube or Vimeo) or Shopify-hosted. |
| External video | Sets the YouTube or Vimeo link. Used when Video source is External. |
| Video hosted | Sets a video from your Shopify files. Used when Video source is Shopify-hosted. |

### Large screen and Mobile screen
| Setting | What it does |
| ---- | ---- |
| Section height | Sets the height of the banner: 50% screen, 70% screen, or Fill screen. The section grows if the content needs more space. When the banner is the first section, the height doesn't include the header. |
| Content position | Places the text and buttons at Top left, Top center, Middle left, Middle center, Bottom left, or Bottom center. |

### Link
| Setting | What it does |
| ---- | ---- |
| Link | Makes the whole banner clickable. It works only when the section has no Buttons block. |

### Custom color
| Setting | What it does |
| ---- | ---- |
| Mask overlay | Sets the color of the layer over the video. See "Make the text easy to read" above. |
| Overlay opacity | Sets how strong the overlay is, from 0 % to 90 %. |
| Text overlay | Changes the color of the banner text. |

### Subheading, Heading, and Description block settings
| Setting | What it does |
| ---- | ---- |
| Text | Sets the text of the block. In the Heading block, put words between [ and ] to highlight them. You choose the highlight style in Theme settings > Typography. |
| Heading size | Sets the size of the heading: Headline, H1, H2, or H3. Appears only in the Heading block. |

### Buttons block settings
| Setting | What it does |
| ---- | ---- |
| Button | Sets the button text, under Button 1 and Button 2. If you leave it empty, the button is hidden. |
| Style | Shows the button as Filled, Outlined, or Text link. |
| Link | Sets the page that the button opens. |

### Countdown timer block settings
| Setting | What it does |
| ---- | ---- |
| Hide the countdown when it ends | Removes the timer from the banner after the end date. |
| End date | Sets the end date in the format YYYY-MM-DD. If you leave it empty, the countdown ends at midnight tonight. |
| End time (optional) | Sets the end time in the format HH:MM (24-hour clock). If you leave it empty, the countdown ends at 23:59. |
| End text | Shows a message when the countdown ends. If you leave it empty, no message appears. |
| Countdown background | Sets the background color of the timer. |
| Countdown number | Sets the color of the numbers. |
| End text (Custom color) | Sets the color of the end text. |

## Troubleshooting
**My uploaded video doesn't show.**
Check that **Video source** is set to **Shopify-hosted**. The section plays only the video that matches the selected source.

**The YouTube or Vimeo video doesn't play.**
Check that **Video source** is **External** and that the link opens a public video. Private videos and videos that block embedding can't play on your store.

**Part of the video is cut off.**
The video is cropped to fill the banner. Keep the important part of the video in the center, especially for mobile.

**Clicking the banner doesn't open my link.**
The section Link works only when the section has no Buttons block. Remove the Buttons block, or set the button links instead.

## Related articles
- [Shine Image Banner](https://doc.ecomx.co/en/article/shine-image-banner-12txcz9/)
- [Shine Video With Text](https://doc.ecomx.co/en/article/shine-video-with-text-17s7kci/)
- [Shine Slideshow Banner](https://doc.ecomx.co/en/article/shine-slideshow-1l5iab8/)
- [Shine Countdown Timer](https://doc.ecomx.co/en/article/shine-countdown-timer-1itlp4n/)
- [Shine Typography](https://doc.ecomx.co/en/article/shine-typography-6k6p3o/)

**In other themes:** [Blum Video Banner](https://doc.ecomx.co/en/article/blum-video-banner-umopmy/) · [Electro Video Banner](https://doc.ecomx.co/en/article/electro-how-to-use-electro-video-banner-1uqofi1/) · [Normcore Video Banner](https://doc.ecomx.co/en/article/normcore-video-banner-skwcto/)