The Video banner section in Maison lets you display a large video background with text, buttons, and other content layered over it.
It is useful for:
- Homepage hero banners
- Product storytelling
- Collection promotions
- Campaign videos
- Brand introductions
- Craftsmanship highlights
- Large visual call-to-action sections
Unlike the standard Video section, Video banner uses the video as full banner background media and places content over it.
Maison supports:
- 1 Video block
- Up to 1 Content container inside the Video block
Section overview
The default structure is:
Video banner
└── Video
└── Content container
├── Heading
├── Description
└── Button
The section also includes controls for:
- Video playback
- Custom colors and Overlay
- Content positioning
- Desktop and mobile Size
- Section width
- Transparent header
- Section spacing
STEPS:
1. Add the Video banner section
To add a Video banner:
- Open the Maison theme editor.
- Open the template where you want to display the banner.
- Click Add section.
- Select Video banner.
- Open the Video block.
- Choose the video Source.
- Configure playback settings.
- Add or edit the Content container.
- Adjust the banner Size and appearance.
- Click Save.
Maison supports only one Video block in each Video banner section.
2. Choose the Video Source
The Video block supports two Source options:
- Uploaded
- External URL
Uploaded
Select a video uploaded to SHOPLINE.
External URL
Enter an external video URL.
Maison supports:
- YouTube
- Vimeo
When using External URL, you can also add a Cover image.
3. Configure Autoplay and Mute video
Enable Autoplay when you want the video to start automatically.
When Autoplay is enabled, Maison automatically mutes the video.
When Autoplay is disabled, you can configure Mute video separately.
Default settings:
Autoplay: Disabled
Mute video: Enabled
For most hero-style Video banners, Autoplay works well because the video is being used as visual background media.
4. Configure Loop, controls, and Play button
The Video block includes:
- Loop video
- Show video controls
- Show play button
Default:
Loop video: Enabled
Show video controls: Disabled
Show play button: Enabled
Loop video
Repeats the video when it reaches the end.
This is useful for short banner videos.
Show video controls
Displays the standard video controls.
For a clean hero banner, these controls are usually left disabled.
Show play button
Displays Maison's custom Play/Pause button over the banner video.
You can disable this if the video is intended to behave purely as animated background media.
5. Add a Cover image for External URL video
When Source is set to External URL, the Video block includes a Cover image setting.
Use the Cover image as the preview before the external YouTube or Vimeo video loads or starts playing.
For the best result:
- Use an image that matches the video content.
- Use a wide image suitable for the banner layout.
- Keep important subjects away from the edges because the banner media can be cropped.
6. Add Alt text
Use Alt text to describe the meaningful video content for accessibility.
For example:
Video showing the craftsmanship behind Maison furniture
or:
Maison lounge furniture in a modern living room
Keep the description short and focused on what the video communicates.
7. Understand Video banner sizing and cropping
Video banner does not use an Aspect ratio setting like the standard Video section.
Instead, the video fills the Size defined by the Video banner section.
Default:
| Device | Width | Height |
|---|---|---|
| Desktop | 100% | 600px |
| Mobile | 100% | 400px |
The banner video uses a cover-style presentation.
This means:
- The video fills the complete banner area.
- Parts of the video can be cropped.
- Cropping can differ between desktop and mobile because the section heights are different.
Choose a source video where the important subject remains visible across different screen sizes.
8. Add content with the Content container
Each Video block can contain up to 1 Content container.
The default preset uses:
Content container
├── Heading
├── Description
└── Button
You can also add supported content such as:
- Subheading
- Heading
- Icon
- Description
- Rich text
- Text
- Button
- Button group
- Image
- Video
- Page
- Custom SLINE
- Divider
- Spacer
- Email signup
- Social media
This lets you build a complete call-to-action over the background video.
For example:
Subheading:
The craft
Heading:
DESIGNED TO LIVE WITH YOU
Description:
Thoughtful furniture made for everyday spaces.
Button:
Explore collection
9. Position the Content container
The Video block includes Arrangement.
Use it to position the Content container within the banner.
For example:
Top left
Center
Bottom left
Bottom center
The default Video banner preset centers its Content container.
The Maison Product templates use a different layout, positioning the content toward the bottom-left of the video.
The Content container also has its own:
- Arrangement
- Spacing
- Size
This gives you more control over the text width and distance from the banner edges.
10. Customize colors and Overlay
The Video block includes Custom colors.
When enabled, you can configure:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button gradient
- Overlay color
- Overlay opacity
Overlay opacity supports:
0–100%
Use Overlay when the banner content does not have enough contrast against the moving video.
For example:
Text color: White
Overlay color: Black
Overlay opacity: 30%
This creates a subtle dark layer over the video and improves text readability.
11. Customize the Content container
The Content container has its own settings for:
- Background media
- Custom colors
- Arrangement
- Spacing
- Size
Background media
Available options:
- None
- Image
- Video
This allows the Content container itself to have a background, independently from the main Video banner.
For most Video banners, leaving Background media set to None creates the cleanest overlay layout.
Size
Use Size to control the content width.
For example, the Maison Product demo uses approximately:
Desktop width: 47%
Mobile width: 100%
Spacing
Use Spacing to keep text away from the banner edges.
The Maison Product demo uses approximately:
Desktop:
50px top/bottom
80px left/right
Mobile:
20px on all sides
12. Configure Section width and Size
Available Section width options are:
- Narrow
- Page
- Fluid
- Full
Default:
Full
Use Full for large hero-style Video banners.
The section's Size controls the banner dimensions separately for desktop and mobile.
The Maison Product templates use approximately:
Desktop:
100% × 750px
Mobile:
100% × 500px
This creates a taller, immersive banner than the default 600px / 400px setup.
The section also includes:
- Show section divider
- Spacing
13. Configure Allow transparent header
Video banner supports Allow transparent header.
This setting applies only when Video banner is the first section on the page.
When enabled, additional settings appear:
- Apply transparent text color
- Use solid header on mobile
Apply transparent text color
Maison uses the transparent Header text treatment and alternate logo configured for the Header.
Use solid header on mobile
Enable this when you want:
Desktop:
Transparent Header over Video banner
Mobile:
Normal solid Header
Maison Product template example
Maison uses Video banner in its Product templates for large visual storytelling sections.
Typical structure:
Video banner
└── Video
└── Content container
└── Subheading
Typical settings:
Section width: Full
Desktop size:
100% × 750px
Mobile size:
100% × 500px
Video:
Uploaded
Autoplay: Enabled
Show video controls: Disabled
Custom colors:
Text color: White
Overlay color: Black
Overlay opacity: 30%
The Video content is positioned toward the bottom-left on desktop.
The Content container uses approximately:
Desktop width: 47%
Mobile width: 100%
with additional padding to keep the content away from the banner edges.
Video section vs. Video banner
Although both sections display video, they are designed for different purposes.
| Feature | Video section | Video banner |
|---|---|---|
| Main purpose | Standalone video content | Hero / background video |
| Video layout | Regular content block | Fills the banner background |
| Content container | No dedicated Content container | Yes |
| Aspect ratio | Yes | No |
| Video fit | Cover / Contain | Background cover behavior |
| Corner radius | Yes | No |
| Section Size | Content-based | Fixed desktop/mobile banner Size |
| Overlay content | Supporting blocks around Video | Content displayed over Video |
| Custom Overlay | Video block overlay | Designed for text contrast over banner |
| Transparent header | No section-specific banner behavior | Supported |
| Best use | Tutorials, product videos, editorial content | Hero banners, campaigns, storytelling |
Recommended setup
For a clean Maison-style Video banner:
- Use short, visually strong videos.
- Enable Autoplay for background-style hero videos.
- Keep Autoplay videos muted.
- Enable Loop for short repeating clips.
- Disable standard controls when the video is primarily decorative.
- Use a Content container for a short Heading and clear CTA.
- Use Overlay when text needs better contrast.
- Keep the important subject near the center of the video because mobile cropping can be significant.
- Use Full Section width for immersive banners.
- Test the video at both desktop and mobile banner heights.
- Check Header contrast carefully when using Allow transparent header.
Notes and limitations
- Video banner supports only 1 Video block.
- The Video block supports up to 1 Content container.
- Video Source supports Uploaded and External URL.
- External URL supports YouTube or Vimeo.
- Autoplay videos are muted automatically.
- Loop video is enabled by default.
- Show video controls is disabled by default.
- Show play button is enabled by default.
- Cover image is available for External URL videos.
- Video banner does not have an Aspect ratio setting.
- Video banner does not have a Video fit selector; the video uses background cover behavior.
- Video banner does not provide a separate mobile video.
- Desktop and mobile banner dimensions are controlled through section Size.
- Custom colors and Overlay are configured on the Video block.
- Section width options are Narrow, Page, Fluid, and Full.
- Allow transparent header only applies when Video banner is the first section.
- Video banner cannot be added to Header or custom Overlay groups.
Troubleshooting
If the Video banner does not display correctly:
- Make sure the Video block contains a valid Uploaded video or External URL.
- For External URL, use a supported YouTube or Vimeo URL.
- If Autoplay has no sound, this is expected because autoplay video is muted.
- If customers need playback controls, enable Show video controls.
- If the Maison Play button is missing, enable Show play button.
- If the video is cropped too much, adjust the section Size or use a video with a safer composition.
- Remember that Video banner does not have a separate mobile video, so test the same source on smaller screens.
- If text is difficult to read, increase Overlay opacity or adjust Text color.
- If content appears in the wrong position, check the Video block Arrangement and Content container settings.
- If the banner is too tall or too short, adjust the desktop and mobile Size values.
- If the transparent Header does not work, make sure Video banner is the first section on the page.
- If the Header becomes difficult to read during playback, use a stronger Overlay or enable Use solid header on mobile.
- Test the complete video on both desktop and mobile rather than checking only its opening frame.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Video Section in Maison
How to Set Up the Video with Text Section in Maison