Author: Mitch C
On this page
- What is the background video section for?
- Background Videos Not Working On Mobile Devices
- Use an mp4 upload (recommended)
- YouTube URL method
- Vimeo URL Method
If your theme has a Background video section, you have a few options for hosting background videos. Skip to the relevant mp4/YouTube/Vimeo section for more help with this.
What is the Background Video section for?
The background video section is for displaying prominent text, with a video in the background! A way to express your brand and add energy and movement to the page.
This section behaves just like the image with text overlay or slideshow sections, so you can add large overlay text and a link to another page. The video may be cropped on some screen sizes so it's best not to add words into the video. Use the overlay text options provided in the settings to add text.
As this video is shown in the background, it will play silently on loop. Having auto audio play on a website when you go to it is not always a nice customer experience - you can't be sure where your customer will be when they are viewing your store. If you need audio in your video, it’s always best to give the customer the choice, so we'd recommend the standard "video" section for videos where you need to play audio.
Background Videos not working on Mobile Devices
Playing background videos on mobile is a tricky business! Some browsers just don't permit it from third parties (iPhones, usually), and when it is permitted, it greatly slows down the page loading and uses a lot of mobile data. This is especially true when loading in YouTube or Vimeo videos.
For these reasons, we took the decision to only show the cover/placeholder image on mobile for Vimeo or YouTube background videos.
Our themes cannot override the settings of users mobile when it comes to this which is why a video will play on some devices and not on others.
Add a placeholder image!
To avoid the play button in the background, please upload a cover image to be displayed. You will find an option inside the settings for this.
Always add a placeholder image, this will show if a video fails to play - and keeps your store looking tidy when this happens!
Use an mp4 upload (recommended)
mp4s are reliable, load faster, tend to work with most mobiles but still not guaranteed to work with everyone, we can't override mobile settings I'm afraid, and don't rely on third party services. These are the best option!
Go to your store's Files page (Shopify Admin > Settings > Files) and upload your image. Try to keep your file under 10MB if you can. You can copy the full URL of the mp4 file from this Files page and paste it into the URL box in the video section.
The URL will look a bit like https://cdn.shopify.com/s/files/1/2301/4669/files/your-video.mp4?v=1594049552
YouTube URL method
Upload your video to YouTube, and copy the URL of the video.
It will look like this: https://www.youtube.com/watch?v=Z0yhS_sJkMk
Please note that some videos may have privacy sharing on and may not work. This is not something the theme can change, it's more of a Youtube issue.
Vimeo URL Method
Upload your video to Vimeo, and copy the URL of the video.
It will look like this: https://vimeo.com/32918908
Please note that some videos may have privacy sharing on and may not work. This is not something the theme can change, it's more of a Vimeo issue.
Copy and paste the video URL into the relevant setting in the theme. The video will play on loop behind the overlay text, with the sound muted (this is a requirement for autoplaying videos).
