> ## 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). # Blum Video Banner **Theme:** Blum ยท **Section type:** All-template section The Video banner section plays a video in the background of a large banner, with a heading, text, and up to 2 buttons on top. Use it to set a mood on the homepage or show a product in motion. You can play a different video on phones. > **Note:** You can add this section to any template, except the header and footer. The section has one Content block for the text and buttons. ![Video banner on desktop with the video playing behind the text](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/videobanner-1_koypk4.png) **What you can do** - Add the section and your video - Play a different video on phones - Add the heading, text, and buttons - Link the whole banner to a page - See what customers see - Change the height, overlay, and badge - 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 **Video**, choose a **Video source**: **External** or **Shopify-hosted**. 4. Paste a YouTube or Vimeo link in **External video**, or select a **Shopify-hosted video**. 5. Under **Layout**, choose the **Section height on large screen** and **Section height on small screen**. 6. Click **Save**. > **Tip:** Use a short, silent clip without important text in it. The video plays muted in the background and is cropped to fill the banner. ## Play a different video on phones 1. Under **Mobile video**, choose a **Video source**: **External** or **Shopify-hosted**. 2. Add the YouTube or Vimeo link in **External video**, or select a video in **Shopify-hosted**. 3. Switch to the mobile preview to check the result. 4. Click **Save**. > **Tip:** A vertical (portrait) video fills a phone screen much better than a wide one. ## Add the heading, text, and buttons 1. Under **Video banner**, click the **Content** block. 2. Choose a **Content position**: **Center**, **Left center**, or **Bottom left**. 3. Under **Text**, enter a **Subheading**, **Heading**, and **Description**. 4. Under **Buttons**, enter a **Primary button label** and **Primary button link**. Add a secondary button the same way, or clear a label to hide that button. 5. Click **Save**. ## Link the whole banner to a page 1. Click the **Video banner** section. 2. Under **Link**, enter a **Link**. 3. Click **Save**. The whole banner becomes clickable only when no button has both a label and a link. ## What customers see - **Banner:** the video starts on its own, without sound and without player controls, and loops. The text and buttons sit on top, over a mask overlay. - **Phones:** screens up to 768 px wide play the mobile video when you add one. Otherwise they play the main video. - **Banner link:** clicking the banner opens the link in a new browser tab. ![Video banner on a phone, playing the separate mobile video](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/videobanner-2_10tdeo8.png) ## Settings reference ### General | Setting | What it does | | ---- | ---- | | Color scheme | Sets the colors of the section. Edit schemes in Theme settings > Colors. | | Enable large heading | Shows the heading in the larger headline size. Useful when the banner is the first section on the page. | | Enable full-width banner | Stretches the banner to the full screen width. Turn it off to keep it inside the page margins. | | Overlay opacity | Sets how dark the mask over the video is, from 0% to 90%. | | Mask overlay | Sets the color of the mask. | | Content overlay | Sets the color of the text on the banner. | ### Layout | Setting | What it does | | ---- | ---- | | Section height on large screen | Sets the height on desktop: 50% screen height, 70% screen height, or Fill screen height. The section grows if the content needs more space. | | Section height on small screen | Sets the height on phones, with the same options. | | Remove padding top | Removes the space above the section. | | Remove padding bottom | Removes the space below the section. | ### Video | Setting | What it does | | ---- | ---- | | Video source | Chooses External (YouTube or Vimeo link) or Shopify-hosted for desktop and tablets. | | External video | The YouTube or Vimeo link. Appears with External. | | Shopify-hosted video | The uploaded video. Appears with Shopify-hosted. | ### Mobile video | Setting | What it does | | ---- | ---- | | Video source | Chooses External or Shopify-hosted for the phone video. | | External video | The YouTube or Vimeo link for phones. Appears with External. | | Shopify-hosted | The uploaded video for phones. Appears with Shopify-hosted. | ### Prominent badge | Setting | What it does | | ---- | ---- | | Text | The badge text. Leave it empty to hide the badge. | | Accent scheme | Colors the badge with the Main or Extra accent from Theme settings > Colors > Accent. Appears after you enter text. | | Position | Places the badge on the Left or Right. Appears after you enter text. | | Shape | Star, Diamond, or Asterisk. Appears after you enter text. | ### Link | Setting | What it does | | ---- | ---- | | Link | Makes the whole banner clickable. Works only when no button has both a label and a link. | ### Content block settings | Setting | What it does | | ---- | ---- | | Content position | Places the text and buttons at Center, Left center, or Bottom left. | | Subheading, Heading, Description | The text on the banner. | | Primary button label, Secondary button label | The button text. Leave a label empty to hide that button. | | Primary button link, Secondary button link | Where the button goes. Appears after you enter the button label. | ## Troubleshooting **Phones still play the desktop video.** Check that the **Mobile video** group has a video for the selected **Video source**. If you chose **External**, the link must be in the mobile **External video** field, not in the main one. **The video has no sound.** Background videos always play muted so they can start on their own. To show a video with sound and controls, use **Video with text**. **The banner link doesn't work.** The banner link is turned off when a button has both a label and a link. Remove the button link, or let customers use the button. **The video looks cropped.** The video is scaled to fill the banner height. Pick a different **Section height**, or use a video with the same shape as the banner. ## Related articles - [Blum Video With Text](https://doc.ecomx.co/en/article/blum-video-with-text-185javp/) - [Blum Slideshow](https://doc.ecomx.co/en/article/blum-slideshow-8jnt92/) - [Blum Image Banner](https://doc.ecomx.co/en/article/blum-image-banner-jzf00j/) - [Blum Countdown banner section](https://doc.ecomx.co/en/article/blum-countdown-banner-section-yf2nwm/)