How to set a background video for a Section?
A moving background is a great way to make a hero banner or a promo section stand out. In EComposer, any section can play a video behind its content, whether the file lives in your store, on another server, or on YouTube or Vimeo. This guide walks you through setting it up and choosing the right playback options.
1. Open the section settings
First, open the Navigator from the left toolbar (or press Ctrl + Shift + U) and click the name of the section you want to add the video to. Selecting it from the Navigator makes sure you pick the whole section rather than an element inside it, and its settings open on the right.
2. Add the video background
With the section selected, you’ll find everything you need in the Layout tab of its settings.
Step 1: Open the Layout tab, then click Video background to expand the group. If the list feels long, you can collapse the other groups so this one is easier to spot.
Step 2: Click Video source and pick where your video comes from: Upload video, Custom video url, Youtube or Vimeo. Each option is explained in the next part.
Step 3: Add your video. For Upload video, click Select video and choose a file (maximum 10MB). For the other sources, paste the video link into the field that appears instead.
Step 4: Once the video shows up behind your section, click Save on the top bar to keep your changes.
3. Choose the right video source
Here’s a quick look at each source so you can pick the one that suits your video best:
- Upload video: upload a video file directly from your computer. Files can be up to 10MB, so a short, compressed clip works best.
- Custom video url: link to a video file hosted elsewhere, such as a video in your Shopify Files. The link should point to the video file itself, for example
https://the-domain.com/video.mp4. - Youtube: paste a YouTube link. You can also set a Start time and End time (in seconds) to play only part of the video.
- Vimeo: paste a Vimeo link to use a video from your Vimeo account.
YouTube and Vimeo videos are disabled on mobile. If the video background matters on phones too, use Upload video or Custom video url instead.
4. Set the playback options
Below the video source, a few checkboxes control how the video plays. Most background videos use Loop, Autoplay and Muted together, so the video runs quietly and smoothly behind your content.
- Loop: replays the video automatically once it finishes.
- Autoplay: starts playing the video as soon as the page loads.
- Muted: turns off the video’s sound.
- Auto play/pause when in view: plays the video only while the section is visible on screen and pauses it when visitors scroll away. This option doesn’t work on Safari.
Turned on Autoplay but the video doesn’t play on the live page? Make sure Muted is ticked as well. Chromium browsers (such as Chrome and Edge) block autoplay for videos with sound, while muted videos are always allowed to autoplay.
5. Make your text easy to read
A busy video can make the headline and buttons on top of it hard to read. To fix that, open the Design tab of the same section and expand Background Overlay. Then pick a Background color and drag the Opacity slider to add a semi-transparent layer between the video and your content.
6. Good to know
- On iPhones and iPads with Low Power Mode turned on, videos won’t autoplay. This is a device and browser limitation, so it’s a good idea to make sure the section still looks good with just the video’s first frame.
- Keep your video short and lightweight so the page loads quickly for your visitors.
Still stuck? Feel free to reach out to us via live chat, and we’ll be happy to help.
