Squarespace Cover Page Autoplay Video Backgrounds

More in Plugins, Scripting and Styling

Since Squarespace 7 launched with the new Cover Page functionality users have been asking if it's possible to create cover pages with automatically looping background videos.

The answer.. ..is.. YES. 

Check out my Squarespace Cover Page video demo to see it in action. 

Method

What you will need:

• A video in MP4 format that is less than 20Mb in size. 

• (Optionally) a video in OGV format that is less than 20Mb in size. This gives wider browser compatibility, but MP4 seems to be widely compatible nowadays. 

• A still image from the video to act as a poster image while the video downloads before playing. 

Uploading videos and poster image

• The videos should be uploaded to your site as per these Squarespace instructions

• The still image should be uploaded as the background image of your cover page (see image below).  The script will grab this image and use it as the poster image for the video. 

The Code

Although the code could be inserted into the sitewide custom css and code injection points, it's probably most efficient to insert it into the Cover Page : Settings > Advanced > Page Header Code Injection. 

Notes for editing code: 

If you have both mp4 and ogv video you will need to insert their addresses in the following slots from the code below.

If you have only mp4 video you will need to insert the address in the following slot from the code below:

If you have MP4 and OGV video, use the following:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
{  } 

else {
    var mp4Video = "/s/looping_snow.mp4";
    var ogvVideo = "/s/looping_snow.ogv";
    var posterImage = $("[data-slice-type=\"gallery\"] .sqs-slice-gallery-item img").attr('data-image');
  $("[data-slice-type=\"gallery\"] .sqs-slice-gallery-item img").replaceWith("<video id=\"loopervideo\" preload=\"none\" autoplay loop poster=\"" + posterImage + "\"><source src=\"" + mp4Video + "\" type=\"video/mp4\"><source src=\"" +ogvVideo + "\" type=\"video/ogg\"></video>");
}
  });

  </script>

<style>
#loopervideo {
// min-height:100%;
// min-width:100%;
width:100%;
height:100%;
object-fit: cover;
  
}
  [data-slice-type="gallery"] .sqs-slice-gallery-item img {
  overflow:hidden;
  }
</style>

---

If you only have MP4 video, use the following:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
{  } 

else {
    var mp4Video = "/s/looping_snow.mp4";
    var posterImage = $("[data-slice-type=\"gallery\"] .sqs-slice-gallery-item img").attr('data-image');
  $("[data-slice-type=\"gallery\"] .sqs-slice-gallery-item img").replaceWith("<video id=\"loopervideo\" preload=\"none\" autoplay loop poster=\"" + posterImage + "\"><source src=\"" + mp4Video + "\" type=\"video/mp4\">");
}
  });

  </script>

<style>
#loopervideo {
width:100%;
height:100%;
object-fit: cover;
  
}
  [data-slice-type="gallery"] .sqs-slice-gallery-item img {
  overflow:hidden;
  }
</style>