Author: Mitch C
On this page
- 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.
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. If you want a background video to play on mobile, you will need to use an mp4 file. Even then, we have a fallback in place in case phone vendors choose to disable background videos in future.
Add a placeholder image!
A video may not autoplay on a mobile device, even if you have set it up perfectly. When this happens, it may look like 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, work on mobile devices, 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).
