The Video with text section in Maison combines a video with a separate Content container for headings, text, buttons, and other supporting content.
It is useful for:
- Product demonstrations
- Brand storytelling
- Designer introductions
- Collection highlights
- Craftsmanship content
- Editorial sections
- Campaign messaging
Maison supports a maximum of:
- 1 Video block
- 1 Content container block
The two blocks are placed at the same level and can be reordered.
Section overview
The default structure is:
Video with text
├── Video
└── Content container
├── Heading
├── Rich text
└── Button
By default, the Video and Content container appear side by side on desktop and stack vertically on mobile.
STEPS:
1. Add the Video with text section
To add the section:
- Open the Maison theme editor.
- Open the template where you want to display the content.
- Click Add section.
- Select Video with text.
- Configure the Video block.
- Configure the Content container.
- Adjust the section Arrangement, width, and spacing.
- Click Save.
The default preset creates:
Video
Content container
├── Heading
├── Rich text
└── Button
2. Choose whether the Video appears on the left or right
The order of the two main blocks controls their position.
Video on the left
Use:
Video
Content container
Result:
Desktop:
┌────────────────────┬────────────────────┐
│ Video │ Content │
└────────────────────┴────────────────────┘
Video on the right
Reorder them to:
Content container
Video
Result:
Desktop:
┌────────────────────┬────────────────────┐
│ Content │ Video │
└────────────────────┴────────────────────┘
On mobile, the blocks stack vertically and follow the same block order.
3. Choose the Video Source
The Video block supports:
- Uploaded
- External URL
Uploaded
Select a video uploaded to SHOPLINE.
External URL
Add a supported external video URL.
Maison supports:
- YouTube
- Vimeo
When External URL is selected, a Cover image setting becomes available.
4. Configure video playback
The Video block includes:
- Autoplay
- Mute video
- Loop video
- Show video controls
- Show play button
Default settings are:
Autoplay: Disabled
Mute video: Enabled
Loop video: Enabled
Show video controls: Disabled
Show play button: Enabled
Autoplay
When Autoplay is enabled, Maison automatically plays the video muted.
Mute video
This setting is available when Autoplay is disabled.
Loop video
Repeats the video when it reaches the end.
Show video controls
Displays the standard video-player controls.
Show play button
Displays Maison's custom Play/Pause button over the video.
5. Configure Aspect ratio and Video fit
Use Aspect ratio to control the Video frame.
Available options are:
- Auto
- 1:1
- 2:3
- 4:3
- 3:4
- 3:2
- 5:4
- 16:9
Default:
4:3
Use Video fit to control how the video fills that frame.
Available options:
- Cover
- Contain
Default:
Cover
Cover
Fills the frame completely, but some cropping can occur.
Contain
Keeps the complete video visible, but empty space can appear around it.
For standard landscape video content, 16:9 is often a good choice.
6. Add a Cover image and Alt text
For an External URL video, use Cover image to control the preview image shown before the video loads or plays.
Use Alt text to describe the meaningful video content for screen readers.
For example:
Video showing the craftsmanship behind the Maison lounge chair
Keep the Alt text concise and descriptive.
7. Configure Video Corner radius
The Video block includes: Corner radius
Corner radius supports:
0–100px
Use Corner radius for a softer card-like appearance.
8. Configure Video Size and Spacing
The Video block has its own:
- Size
- Spacing
Default Size:
Width: 100%
Height: Auto
When the section uses a desktop Row arrangement, you can reduce the Video width and use the remaining width for the Content container.
For example:
Video width: 55%
Content container width: 45%
For mobile, a common setup is:
Video width: 100%
Content container width: 100%
9. Configure the Content container
The Content container holds the text and supporting content beside the Video.
The default preset includes:
Content container
├── Heading
├── Rich text
└── Button
You can also add:
- App
- Subheading
- Heading
- Icon
- Description
- Rich text
- Text
- Button
- Button group
- Image
- Video
- Page
- Custom SLINE
- Divider
- Spacer
- Email signup
- Social media
The Content container includes its own:
- Background media
- Custom colors
- Arrangement
- Spacing
- Size
10. Customize the Content container
Arrangement
Use Arrangement to control the direction, alignment, and spacing of the content blocks.
The preset uses a vertical layout with approximately:
Row gap: 24px
Column gap: 24px
Size
Use Size together with the Video Size to control the desktop proportions.
For example:
Video: 55%
Content container: 45%
Spacing
Use Spacing to add internal distance around the Content container.
This is useful when the text needs more room from the Video or section edges.
11. Add Background media to the Content container
The Content container supports Background media:
- None
- Image
- Video
Background Image
You can configure:
- Image
- Alt text
- Image fit: Cover or Contain
Background Video
You can configure:
- Source: Uploaded or External URL
- Video
- URL
- Cover image
- Alt text
- Video fit
Background Video automatically:
- Autoplays
- Loops
- Remains muted
- Hides standard controls
- Hides the Play button
12. Configure Custom colors
The section supports Custom colors for the overall Video with text area.
Available settings include:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button background gradient
The Content container can also use its own Custom colors independently.
When Custom colors are enabled for the Content container, you can additionally configure:
- Overlay color
- Overlay opacity
This is especially useful when the Content container uses Background media.
13. Configure the section Arrangement
The section itself includes Arrangement.
Default desktop layout:
Direction: Row
Align items: Center
Justify content: Center
Row gap: 60px
Column gap: 60px
Default mobile layout:
Direction: Column
Align items: Start
Justify content: Center
Row gap: 20px
Column gap: 20px
This controls the relationship between the main Video and Content container.
Use the block order together with Arrangement to build the required desktop and mobile layout.
14. Configure Section width, Size, and divider
Available Section width options are:
- Narrow
- Page
- Wide
- Full
Default:
Page
The section also includes:
- Show section divider
- Spacing
- Size
Default section Size:
Width: 100%
Height: Auto
For most Video with text layouts, keeping the section Height on Auto allows the content to determine the final height naturally.
15. Configure Allow transparent header
Video with text supports Allow transparent header.
This setting only applies when Video with text is the first section on the page.
When enabled, additional options appear:
- Apply transparent text color
- Use solid header on mobile
Apply transparent text color
Maison applies the transparent Header color treatment and white logo.
Use solid header on mobile
Enable this when you want:
Desktop:
Transparent Header over the first section
Mobile:
Normal solid Header
Use this feature only when the content behind the Header provides enough contrast.
How Video with text works
Video with text
│
├── One Video
│ ├── Uploaded or External URL
│ ├── Autoplay / Mute / Loop
│ ├── Controls / Play button
│ ├── Aspect ratio
│ ├── Video fit
│ ├── Corner radius / Overlay
│ └── Size / Spacing
│
└── One Content container
├── Heading / Text / Button / other blocks
├── Optional Background media
├── Custom colors
├── Arrangement
└── Size / Spacing
Video section vs. Video with text vs. Video banner
| Feature | Video section | Video with text | Video banner |
|---|---|---|---|
| Main purpose | Standalone video content | Video beside text/content | Hero background video |
| Main layout | Content stack | Side-by-side by default | Video fills banner |
| Content container | No dedicated container | Separate sibling block | Overlays the Video |
| Aspect ratio | Yes | Yes | No |
| Video fit | Cover / Contain | Cover / Contain | Background cover |
| Corner radius | Yes | Yes | No |
| Best use | Tutorials/editorial video | Storytelling and feature content | Hero campaigns |
Recommended setup
For a balanced Maison-style Video with text section:
- Use approximately 50/50, 55/45, or 60/40 desktop proportions.
- Set both blocks to 100% width on mobile.
- Use 16:9 for standard landscape video.
- Keep the Content container focused on one main message.
- Use one clear CTA rather than several competing buttons.
- Keep standard controls enabled for longer informational videos.
- Use the Maison Play button for cleaner editorial presentation.
- Reorder Video and Content container to control which side the Video appears on.
- Check the mobile block order after reordering.
- Test both Cover and Contain if the Video crop does not look right.
Notes and limitations
- Video with text supports a maximum of 1 Video block.
- It supports a maximum of 1 Content container block.
- Video and Content container are sibling blocks at the same section level.
- Their order controls the desktop and mobile content flow.
- Video Source supports Uploaded and External URL.
- External URL supports YouTube or Vimeo.
- Autoplay videos are muted by default.
- Cover image is available for External URL videos.
- The main Video does not have a separate mobile Video setting.
- Aspect ratio supports Auto, 1:1, 2:3, 4:3, 3:4, 3:2, 5:4, and 16:9.
- Video fit supports Cover and Contain.
- Content container Background media supports Image and Video.
- Section width options are Narrow, Page, Wide, and Full.
- Allow transparent header only applies when Video with text is the first section.
- Video with text cannot be added to Header or custom Overlay groups.
Troubleshooting
If Video with text does not display correctly:
- Make sure both Video and Content container are present.
- Maison supports only one of each.
- If the Video appears on the wrong side, reorder the two blocks.
- If mobile content appears in the wrong order, remember that mobile follows the block order.
- If the Video crop looks wrong, adjust Aspect ratio or Video fit.
- If the Video is too large or small, check both Video and Content container Size.
- If Autoplay has no sound, this is expected because autoplay Video is muted.
- If the Play button is missing, check Show play button.
- If standard controls are missing, enable Show video controls.
- If Content container colors look wrong, check both section and Content container Custom colors.
- If Background media is not displaying, check the Content container Background media settings.
- If the transparent Header does not work, make sure Video with text is the first section on the page.
- Test the layout on both desktop and mobile after changing block order, Size, or Arrangement.
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 Banner Section in Maison
Video Section vs. Video Banner in Maison