How to Implement a Video Background in Squarespace 7.1
For the most part, using video backgrounds on websites has generally been discouraged (unless you’re a video pro, and understand the technical requirements), because video is notorious for slowing down site loading times. When your site is slow, it negatively impacts your site rankings, and makes for a frustrating user experience. So, it won’t matter how beautiful your site is if no one hangs around, waiting to see it!
Squarespace understands how important video is in the current digital environment, and one of the features they introduced fairly recently is the ability to upload videos directly to a site. Before this development, the only way to achieve a video effect was to embed a video from YouTube, Vimeo, Animoto, or Wistia, which works just fine in most situations, but if you wanted to incorporate a video in a header or banner, that would autoplay on mute, this raised a host of other issues, like videos not playing in the mobile view, so, it wasn’t ideal.
This new solution takes care of that problem, and makes adding video to banners and backgrounds super easy, so you can achieve a unique, and engaging visual experience that will likely help keep your visitors around longer. However there is a caveat — there is a 30-minute total capacity for video hosting, so use this video upload feature wisely (in most cases, embedding videos is preferable). This video storage limit applies to all version 7.1 sites regardless of billing plan.
You can purchase more storage if you plan to use the membership feature; otherwise it’s best to embed your videos across your site, and use the video hosting option for your most important design-related video features like banners on your home page, or other site pages that get a lot of traffic. To take advantage of the hosting option, upload videos that you either own, or have purchased from a third party, from your device directly to your site.
Let’s review how to to do this, step-by-step, and take a look at some of the effects you can apply to your video background.
Best Practices Tips!
The best file format to upload is an .mp4 Other formats can also be uploaded, but are then converted to an .mp4.
Ideal video dimensions: 1280x720 (if you use the standard dimensions of 1920x1080, your video will likely be too large a file size and won’t render well).
Keep your video below 30 seconds for best performance (the one I used in the example was only 13 seconds long).
Keep your videos under 20 MB.
Please note that the only videos that autoplay are background videos, and even then, sometimes it depends on the browser (if autoplay settings are turned off, it may prevent videos from playing automatically).
Finally, if you want more info, you can review all the details related to video specs here. And, if you’re wondering where you can find free, copyright-free videos to use as background videos, my favorite resources are Canva, and Pexels.
Have you tried this feature yet? Comment below!
If you liked this post, scroll down to subscribe and you’ll get more content designed to help you launch and grow your online presence sent right to your inbox.
