A partial, styles and scripts from implementing @squarespace/video-background-rendering in Squarespace templates


1122.1.1a year ago5 years agoMinified + gzip package size for @squarespace/video-background in KB


Squarespace Video Background

A partial, styles, and scripts for use with @squarespace/video-background-rendering

NOTICE: This code is licensed to you pursuant to Squarespace’s Developer Terms of Use. See license section below.


npm install --save @squarespace/video-background

Installing Toolbelt

This is a Squarespace web module. To handle the markup, styles, and configuration files in this module, you'll need to install Squarespace Toolbelt as a development dependency and use its assemble functionality.

npm install --save-dev @squarespace/toolbelt

Usage - vanilla

var VideoBackgroundRenderer = require('@sqs/video-background').VideoBackground;
var GetVideoProps = require('@sqs/video-background').getVideoProps;

var container = document.body.querySelectorAll('.sqs-video-background');
var videoBackground = new VideoBackgroundRenderer(GetVideoProps(container));

Usage - with @squarespace/controller

import controller from '@squarespace/controller';
import VideoBackground from '@squarespace/video-background';

controller.register('VideoBackground', (element) => {
  return VideoBackground(element, ['tweak-page-banner-image-height', 'tweak-show-page-banner-image']);

Using ES6

If you prefer to handle transpiling and polyfilling on your own, you can import ES6 from Video Backgroun:

import controller from '@squarespace/video-background/src';

Alternately, Video Background specifies a module property in package.json that points to the uncompiled src/index.js, so you may be able to simply import @squarespace/video-background if you're using one of the following bundlers:


new VideoBackground(element, tweaksToWatch)


  • element HTMLElement - container for the video background
  • [tweaksToWatch] Array - names of tweak options to watch to reinitialize the video background. To be used in the Squarespace Controller implementation


Use the data attributes of the container to set configuration options for the video background renderer. The YouTube or Vimeo URL should be set on the container element via data-config-url="SOME-URL".


Unbind listeners and destroy the instance of the video background renderer.


Portions Copyright © 2016 Squarespace, Inc. This code is licensed to you pursuant to Squarespace’s Developer Terms of Use, available at http://developers.squarespace.com/developer-terms-of-use (the “Developer Terms”). You may only use this code on websites hosted by Squarespace, and in compliance with the Developer Terms. TO THE FULLEST EXTENT PERMITTED BY LAW, SQUARESPACE PROVIDES ITS CODE TO YOU ON AN “AS IS” BASIS WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.