@squarespace/video-background

    2.1.1 • Public • Published

    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.

    Usage

    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:

    Reference

    new VideoBackground(element, tweaksToWatch)

    Params

    • 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

    GetVideoProps(container)

    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".

    VideoBackground.destroy()

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

    License

    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.

    Keywords

    none

    Install

    npm i @squarespace/video-background

    DownloadsWeekly Downloads

    1

    Version

    2.1.1

    License

    SEE LICENSE IN LICENSE.txt

    Unpacked Size

    13 kB

    Total Files

    14

    Last publish

    Collaborators

    • jcolton
    • nhassan
    • squarespace-dev
    • joshkill
    • pmalinowski
    • gzhang
    • aparkssqsp
    • brianjcarroll
    • danjohnsonnj
    • phensley
    • mattlyons
    • pomerantsev
    • squarespace-admin