Background Video Section

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 video not playing on mobile.

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 which in some locations can cause customers to go over their limit and charge extra.

For these reasons, we took the decision to show the cover/placeholder image on mobile for Vimeo or YouTube background videos when the browser prevents the video from playing.

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.

But my video is an mp4 and it’s still not playing!

Please temporarily change your video to this one and check if this plays on mobile:
https://cdn.shopify.com/s/files/1/0848/3828/files/Placeholder_video_on_Vimeo_540p.mp4
If it does, then your video has not been encoded correctly. It will need to be encoded in the h.264 format.

No sound?

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 like auto-playing videos with sound when you land on a page, most 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.

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! 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 still not guaranteed to work with everyone, we can’t override mobile browser settings. 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 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 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 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).

  Worthwhile reading:

Image sizes Theme updates Page Speed SEO

  Looking to customise beyond our settings?

Our support covers assistance for your theme and settings as originally supplied.
If our settings don’t include a specific control you’re looking for, you can hire a developer to customise the theme code.

We recommend Taskhusky for altering your theme code:
Click here to request a custom coding quote from Taskhusky.

Be sure to read this article before changing code!