How to Add a Background Video on Shopify

As you may have discovered, adding a hero video to your site isn’t terribly easy. With Shopify it can be particularly difficult, especially if you want to create an easy to use theme for a client. We’re all about clean, quick solutions so here are the easiest ways to set up a hero video in under an hour.

Themes with a Background video

Buying a theme with a Background video is going to be the easiest option. You’ll need to first upload you video to YouTube or Vimeo, but that should take a matter of minutes. Many Shopify themes from the Theme Store have a video option, however the video usually doesn’t play automatically or muted. It’s not really a background video in this case, but it’s close.

 

Video Background App

If your theme doesn’t come with a Background video, your best, non-technical option is to just install the Video Background App from the Shopify App Store. We’ve used it ourselves and it’s pretty easy to get going. If you’re good with HTML/Liquid you can quickly install it yourself or the app developer offers to do it free of charge.

 

jQuery Plugin

We use the jQuery.YoutubeBackground plugin in our own themes and it’s worked beautifully. It uses the same parameters as the YouTube API so it’s easy to find StackOverflow posts if you’re looking to extend the functionality. You can even get a little create and use the player events which are also well documented.
 

Mobile Limitations

It’s honestly pretty hard to get it to play consistently across browser types and devices. All Shopify themes will require the video to be played after a user event (pressing the play button). The jQuery option will have the same issue unless you extend the basic functionality. The app option is your best bet here, but again no promises as they say on their site.

Jonathan Osborn