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.
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
- In the theme editor, open the template where you want the section.
- In the left sidebar, click Add section > Video banner.
- Under Video, choose a Video source: External or Shopify-hosted.
- Paste a YouTube or Vimeo link in External video, or select a Shopify-hosted video.
- Under Layout, choose the Section height on large screen and Section height on small screen.
- 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
- Under Mobile video, choose a Video source: External or Shopify-hosted.
- Add the YouTube or Vimeo link in External video, or select a video in Shopify-hosted.
- Switch to the mobile preview to check the result.
- Click Save.
Tip: A vertical (portrait) video fills a phone screen much better than a wide one.
Add the heading, text, and buttons
- Under Video banner, click the Content block.
- Choose a Content position: Center, Left center, or Bottom left.
- Under Text, enter a Subheading, Heading, and Description.
- 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.
- Click Save.
Link the whole banner to a page
- Click the Video banner section.
- Under Link, enter a Link.
- 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.
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
Updated on: 23/10/2026
Thank you!