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, plus add energy and movement to the page.
This section behaves just like the ‘Image with text overlay’ or ‘Slideshow’ sections meaning you can add large overlay text and a link to another page if you wish. Videos may be cropped on some screen sizes so it’s best not to add words in to the video footage itself. Instead, use the ‘overlay text’ options provided in the settings to add your text so this dynamically resizes to fit, floating over the top of the footage.
As this section’s video is shown in the background, it will play silently on loop. Having audio immediately autoplay on page load is not always a great experience for your customers as you can’t be sure of their exact environment – they may be at a workplace or in a quiet public space for example, where it’s not fully convenient to be playing sound. If you need audio in your video, it’s always best to give your customers the choice as to when they activate this. We’d recommend the alternative “Video” section for when you need audio active by default.
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, the video content greatly slows down the page loading and uses a lot of mobile data which can cost your customers money, so it makes sense that 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 the Settings > Files area of the Shopify admin. Once you have done this, copy the direct link to the video and paste it into the video URL entry field in the ‘Background Video’ section’s settings.
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 without issue:
If this video plays, then your original video has not been encoded correctly before being uploaded. It will need to be encoded in the h.264 formats. If you do not have your own video software capable of changing your original video’s encoding, you can use this site to help:
Videos used in your “Background video” section don’t play sound. They are auto-playing videos that are designed to sit in the background to add a moving visual element. If you wish to feature videos that play sound, you can instead use the ‘Video’ section. Browsers don’t allow sound to be active by default on auto-playing videos. Most browsers will block the video, which can cause issues. Also, it can be an unpleasant surprise for a customer to land on a site and be greeted with a loud sound that they didn’t expect to hear.
Black screen (add a placeholder image)
Always add a placeholder image, as this will show if a video fails to play and keeps your store looking readily populated if this does happen. It also hides YouTube generated menus from being displayed when the video is loading up. So, to avoid a ‘play’ button showing in the background, or a black box (where the video should be), always upload a placeholder image. You will find the option inside the section’s settings.
Use an MP4 file upload (recommended)
MP4s are reliable, load rapidly and tend to work with most mobiles (but are still not guaranteed to work with all). Shopify currently limits videos to 1 minute maximum length and 20MB file size (read more about Shopify file limits here). Themes cannot override these limitations. We also can’t override mobile browser settings as these are rules applied manually on the physical device by the device owner.
Go to your store’s Files page (Shopify Admin > Settings > Files) and upload your video. Try to keep your file size as small as possible. You can copy the full URL of the MP4 file from this Files page and paste it into the URL entry box in the video section’s settings.
To see more information on media types, you can check out the Shopify support guide through this link.
The URL should look similar in format to this: https://cdn.shopify.com/s/files/1/2301/4669/files/your-video.mp4?v=1594049552
YouTube URL method (Doesn’t work on mobile, add image placeholder)
Upload your video to YouTube, view the final video on the YouTube website and then copy the URL of the video by clicking the “Share” icon under the video window.
The URL should look similar in format to this: https://www.youtube.com/watch?v=Z0yhS_sJkMk
Please note that some videos may have privacy settings active which may prevent sharing of these outside of YouTube. You will need to consult YouTube’s help documentation for more information on this.
Vimeo URL method (Doesn’t work on mobile, add image placeholder)
Upload your video to Vimeo, and copy the URL of the video.
The URL should look similar in format to this: https://vimeo.com/32918908
Please note that some videos may have privacy settings active which may prevent sharing of these outside of Vimeo. You will need to consult Vimeo’s help documentation for more information on this.
Copy and paste the video URL into the relevant entry field 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).