The Video section in Maison lets you add a standalone video together with headings, text, buttons, images, and other supporting content.
It is useful for:
- Product demonstrations
- Brand storytelling
- Campaign videos
- Craftsmanship or behind-the-scenes content
- Tutorials
- Editorial video content
- Store or showroom introductions
The default preset uses:
Video
├── Heading
└── Video
Unlike Slideshow or Video banner, the Video section does not use a dedicated Content container. The Video block and any supporting content blocks are added at the same section level.
STEPS:
1. Add the Video section
To add the section:
- Open the Maison theme editor.
- Open the template where you want to display the video.
- Click Add section.
- Select Video.
- Open the default Video block.
- Choose the video Source and configure playback settings.
- Add supporting content such as Heading, Text, or Button if needed.
- Click Save.
The default Video block uses:
Aspect ratio: 16:9
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 a supported external video URL.
Maison's Theme Editor indicates support for:
- YouTube
- Vimeo
When using an 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.
This behavior is required because browsers commonly restrict videos that try to autoplay with sound.
When Autoplay is disabled, the Mute video setting becomes available.
Default settings:
Autoplay: Disabled
Mute video: Enabled
Use Autoplay for background-style or visual storytelling videos.
Keep Autoplay disabled when customers should choose when to start playback.
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
When enabled, the video starts again after reaching the end.
Show video controls
Enable this when customers need the standard video player controls.
Depending on the video source, these controls can include playback, progress, volume, and fullscreen options.
Show play button
Displays Maison's custom Play/Pause button over the video.
This is useful when standard video controls are hidden.
5. Configure Aspect ratio
Use Aspect ratio to control the shape of the Video block.
Available options are:
- Auto
- 1:1
- 2:3
- 4:3
- 3:4
- 3:2
- 5:4
- 16:9
Default for a newly added Video block:
4:3
The default Video section preset changes this to:
16:9
Use 16:9 for most standard landscape videos.
Use Auto when you want the Video block to follow the video's natural ratio.
6. Choose Cover or Contain
Use Video fit to control how the video fills its frame.
Available options are:
- Cover
- Contain
Default:
Cover
Cover
The video fills the entire available frame.
Some cropping can occur if the video ratio does not match the selected Aspect ratio.
Contain
The complete video remains visible.
Empty space can appear when the video and frame use different ratios.
Use Cover for visual banners and editorial video.
Use Contain when showing the complete video frame is more important than filling the available area.
7. Add a Cover image for an External URL video
When Source is set to External URL, the Video block includes Cover image.
The Cover image is displayed before the external video is loaded or played.
A good Cover image should:
- Match the video content.
- Use a similar Aspect ratio to the Video block.
- Clearly indicate what the video is about.
- Avoid important details near areas that may be cropped.
If no custom Cover image is selected, the available video preview behavior depends on the external source.
8. Add Alt text
Use Alt text to describe the video for screen readers.
For example:
Video showing the Maison chair assembly process
or:
A walkthrough of the Maison flagship showroom
Keep the description short and focused on the meaningful video content.
9. Configure Corner radius
The Video block includes Corner radius
Corner radius
Available range:
0–100px
Default:
0px
Increase the value when you want rounded video corners.
10. Configure Video Size and Spacing
Each Video block has its own:
- Size
- Spacing
Default Size:
Width: 100%
Height: Auto
Use Size when you want the Video block to occupy less than the full available content width.
Use Spacing to add distance around the individual Video block.
This is separate from the overall section Spacing.
11. Add supporting content
The Video section can contain more than the Video block.
Available section blocks include:
- Subheading
- Heading
- Icon
- Description
- Rich text
- Text
- Button
- Button group
- Image
- Video
- Page
- Custom SLINE
- Divider
- Spacer
For example:
Video
├── Subheading
├── Heading
├── Rich text
├── Video
└── Button
This lets you create a complete video storytelling section rather than displaying only the video player.
Use the section Arrangement setting to control how these blocks are positioned and spaced.
12. Configure Section width and appearance
The Video section includes:
- Custom colors
- Section width
- Show section divider
- Arrangement
- Spacing
Available Section width options are:
- Narrow
- Page
- Wide
- Full
Default:
Page
Custom colors
Enable Custom colors to configure:
- Text color
- Background color
- Background gradient
- Button text color
- Button background color
- Button gradient
Show section divider
Enable this when you want a divider between the Video section and surrounding sections.
Spacing
Default section spacing is approximately:
Desktop:
60px top
60px bottom
Mobile:
40px top
40px bottom
How the Video section works
Video section
│
├── Optional Heading / Text / Button / other content
│
└── Video block
├── Source
│ ├── Uploaded
│ └── External URL
├── Autoplay / Mute
├── Loop
├── Controls / Play button
├── Aspect ratio
├── Video fit
├── Optional Cover image for External URL
├── Alt text
├── Corner radius
└── Size / Spacing
Recommended setup
For a clean Maison-style Video section:
- Use 16:9 for standard landscape videos.
- Use Uploaded video when you want the most direct theme integration.
- Use a good Cover image for External URL videos.
- Enable Autoplay only when automatic playback improves the experience.
- Remember that Autoplay videos are muted.
- Keep Loop enabled for short visual or ambient clips.
- Enable standard controls for longer videos customers need to navigate.
- Use the Maison Play button for a cleaner presentation when controls are hidden.
- Use Cover for visual presentation and Contain when the complete frame must remain visible.
- Add a clear Heading or short supporting text when the video needs context.
- Test playback on both desktop and mobile.
Notes and limitations
- The Video section does not use a dedicated Content container.
- Supporting blocks and Video blocks are added at the same section level.
- Video Source supports Uploaded and External URL.
- External URL supports YouTube or Vimeo.
- Autoplay forces the video to play muted.
- Mute video is configurable when Autoplay is disabled.
- Loop video is enabled by default.
- Standard video controls are disabled by default.
- Show play button is enabled by default.
- Cover image is available for External URL videos.
- There is no separate mobile Video setting in the standard Video block.
- 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.
- Section width options are Narrow, Page, Wide, and Full.
- The Video section cannot be added to Header or custom Overlay groups.
Troubleshooting
If the Video section does not display or play 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 does not include sound, this is expected; Maison automatically mutes autoplay videos.
- If customers need sound controls, disable Autoplay and enable standard Video controls.
- If the Play button is missing, check Show play button.
- If standard controls are missing, enable Show video controls.
- If the video is cropped too much, change Aspect ratio or switch Video fit to Contain.
- If the video has empty space around it, use Cover instead of Contain.
- If an External URL video has no suitable preview, add a Cover image.
- If the video is too wide or narrow, check the Video block Size and the section Section width.
- Test the section on both desktop and mobile after changing playback or sizing settings.
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 Slideshow Section in Maison
How to Set Up the Video Banner Section in Maison