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.
Why is my video not playing on mobile?
Playing background videos on mobile is a tricky business! Some browsers just don’t permit it (iPhones, usually), and when it is permitted, it greatly slows down the page loading and uses a lot of mobile data (which can actually cost your customers money – so it makes sense why video hosting companies are hesitant to permit this).
The only way to reliably play videos on mobile is to upload the video file (in MP4 format) to Shopify in the Settings > Files section of the admin, and then copy the link and paste it into the video URL setting.
But my video is an mp4 file and it’s still not playing! (Vimeo/YouTube links do not count as MP4)
Please temporarily add the following link instead and run a test to see if it plays it.
If it does, then your video has not been encoded correctly. It will need to be encoded in the h.264 formats. You can try using this site to change the encoding if you can’t do it on your video software.
Background videos don’t play sound. They are auto-playing videos that are designed to sit in the background to add a visual design. If you want to have videos that play sound, you can use the default video section. Browsers don’t allow sound to play from auto-playing videos. Most browsers will block the video causing issues. Also, it can be a negative experience for a customer to land on a site and be greeted with a sound that they didn’t accept to play.
BLACK SCREEN – Add a placeholder image!
To avoid the play button in the background or black screen where the video would be, 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! It also hides Youtube menu’s from being displayed when loading in.
Use an mp4 file upload (recommended)
mp4s are reliable, load faster, tend to work with most mobiles but are still not guaranteed to work with all. Shopify currently limits videos to 1 min max length & 20MB size (read more about Shopify file limits). Theme cannot override this. We can’t override mobile browser settings as these are rules set on the device which we don’t have the approval to override.
Go to your store’s Files page (Shopify Admin > Settings > Files) and upload your image. Try to keep your file under 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.
To see more information on limitations, you can check out the Shopify support guide through this link.
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 and may not play as they disable videos outside of youtube.
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 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 auto-playing videos).