Making responsive video backgrounds in Squarespace

Notice:  If your cover page video background is broken due to the recent Squarespace update, please see the bottom of the post for the updated code. 


One design trend that is popping up on websites throughout the internet is having video backgrounds that go behind text instead of images.  Sites like Big Cartel, airbnbBlu Homes, and even Squarespace themselves use video backgrounds to give users a better insight into how their company perceives itself.  And they look really cool!  While this feature is not built directly into Squarespace, it is possible with a bit of custom tweaking.  I will cover the two main ways you may want to incorporate a video background:

  1. as a replacement for a banner image in a theme like Bedford
  2. as a replacement for the background image on cover pages (DEMO)

Regardless of which type of background video you choose, you'll have to start with a little bit of common code.  First, from the Home menu your Squarespace site, click Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:


    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

Then, you need to choose your video.  For my background video, I'll be using a free video clip of a spaceship traveling to Muno Space I found on Videvo.net.  Once you download the clip, you need to convert the video in to an .mp4.  This allows for your video to be played in the most possible browsers.  To convert the video, head over to Cloud Convert.  Drop your video on the page, and click the mp4 choice under the category video like below:

cloudconvert

Once finished, just click the button that says download and you should have your file.  The next step is uploading the file to Squarespace and getting the video URL.  Head over to any individual page and create a text block.  In the text block, write a small amount of text, highlight it, then click the create link button.  In that menu, click the menu item entitled Files.  You then want to add a new file by clicking Add a File and selecting your mp4 video.  It may take a few minutes to upload if you have a large file.  Once the file is uploaded, you should be able to get your URL by selecting the video from the Existing tab for the link.  Then, you can get the link by clicking the text that you entered, then right clicking to copy the Image URL.  If this sounds confusing, just follow the videos below (click to enlarge):

Once you have the link, which should look something like https://www.yourwebsite.squarespace.com/s/videoname.mp4, put that somewhere safe -- you will need it soon.  Important: As you can see at the beginning of the link, it starts with https.  Remove the s from the end to make it into http.  If you try to continue this tutorial without doing so, your website will not be able to show the videos unless it has an SSL certificate (which it probably doesn't).

Banner Videos

Like on the Blu Homes website, you may want to have a banner image that has a lot of content below it, but is still the focus of the user's attention when they visit.  A theme that plays well into this is Bedford, as it has a large banner image at the top.  This method works on the blog pages of Bedford as well. In addition to Bedford, it has been confirmed to work on the home pages and blogs of the following templates: Hayden, Anya, Bryant, Pacific, and Fulton (now works in all themes).  Video backgrounds should be possible in the other templates with slight variations in the code.

In the Bedford theme, you have the option of setting the image for the banner at the top of home page.  The first step is to set the image that you would like to appear on mobile phones.  Because of the high data-usage of videos, your autoplaying videos will not appear on mobile phones.  Put this picture so that your site can have a fallback when the video does not work.

Then, go to the Settings (gear) icon that appears when you hover over the Home Page.  From there, click the tab Advanced and in the textbox entitled Page Header Code Injection, paste the following code (replace the YOURURLHERE with the video URL from earlier and surround it with "quotes"):


    <script type="text/javascript">
      $(window).bind("load", function() {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        } else {
          var banner = $('#pageWrapper img').first();
          if (banner.length === 0)
            banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first();
          if (banner.length === 0)
            banner = $('#parallax-images img').first();
          if (banner.length === 0)
            banner = $('.has-main-image img').first();
          if (banner.length === 0)
              banner = $('#page-thumb img').first();
          var url = "YOURURLHERE";
          banner.hide();
          $('<video class="bannerVideo" autoplay="" loop="" preload><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
          adjustBanner($('.bannerVideo'), banner);
          setTimeout(function() {
            adjustBanner($('.bannerVideo'), banner);
          }, 2000);
          $(window, banner).resize(function() {
            adjustBanner($('.bannerVideo'), banner);
            setTimeout(function() {
              adjustBanner($('.bannerVideo'), banner);
            }, 200);
          });
        }
        function adjustBanner (video, banner) {
          video.css({
            height: banner.css('height'),
            width: banner.css('width'),
            top: banner.css('top'),
            left: banner.css('left'),
            position: 'relative',
            'object-fit': 'inherit'
          });
        }
      });
    </script>

What this script does is first check if the browser is mobile.  Then, once that is determined, it inserts the video right where the image was.  By mimicking the dimensions of the image at different resolutions, the video is completely responsive.

Cover Pages

The process for cover pages is similar to the Home Page headers, but requires slightly different code.  This code will work on any cover page other than the two that are location based.  Try it out with the different cover pages and you will be pleased with you see.  It works on the full screen landing pages, the half and halfs, and even in the circle on the Focus template.

To get started, create a cover page!  On the editing menu of the cover page, click the Settings (gear) icon.  From there, click on the Advanced tab and paste the following into the textbox entitled Page Header Code Injection, paste the following code (once again, replace the YOURURLHERE with the video URL from earlier and surround it with "quotes"):


    <script type="text/javascript">
      $(window).bind("load", function() {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        } else {
          var banner = $('.sqs-slice-gallery-item > img');
          banner.hide();
          var url = "YOURURLHERE";
          $('<video class="bannerVideo" autoplay loop><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
          adjustBanner($('.bannerVideo'), banner);
          $(window, banner).resize(function() {
            adjustBanner($('.bannerVideo'), banner);
            setTimeout(function() {
              adjustBanner($('.bannerVideo'), banner);
            }, 200);
          });
        }
        function adjustBanner (video, banner) {
          video.css({
            height: '100vh',
            width: '100vw',
            top: banner.css('top'),
            left: banner.css('left'),
            position: 'relative',
            'object-fit': 'inherit'
          });
        }
      });
    </script>

Your final result should end up looking something like this (you can even have sound in your video!!).  Quick tip: If your video is laggy and you feel it is loading too slowly, you can compress it with a program like HandBrake. And with that, you can now put video backgrounds on your home pages, blogs, and cover pages.  These are two options that could give your Squarespace site the twinkle it needs.  Feel free to share your implementations on your website in the comments!

Edit: Fixed the code snippet for home pages, I had some sort of copy and paste error.  Thanks Alex for finding the issue!

Edit 2: 5/11/15 - Code updated to work on all templates with image banners!

Edit 3: 12/4/15 - Cover page code updated to reflect new Squarespace changes.