No description, website, or topics provided.
JavaScript
Latest commit 537b7e2 Feb 14, 2017 @georgezzhang georgezzhang 1.0.1
Permalink
Failed to load latest commit information.
src PR feedback Feb 7, 2017
.babelrc Initial commit Jan 25, 2017
.eslintrc Initial commit Jan 25, 2017
.gitignore Initial commit Jan 25, 2017
.gitkeep Initial commit Jan 25, 2017
.npmignore Initial commit Jan 25, 2017
LICENSE.txt Initial commit Jan 25, 2017
README.md Initial commit Jan 25, 2017
package.json 1.0.1 Feb 14, 2017

README.md

Squarespace Video Background Rendering

Use the YouTube or Vimeo API to display a video background inside a container element with configurable properties.

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-rendering
import { VideoBackground as VideoBackgroundRenderer } from '@squarespaces/video-background-rendering';
const config = {
  container: document.documentElement.querySelector('#myContainer'),
  url: 'https://www.youtube.com/watch?v=IWBcS6sDIDM'
};
const myVideoBackground = new VideoBackgroundRenderer(config);

Using ES6

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

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

Alternately, Video Background Rendering 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-rendering if you're using one of the following bundlers:

Reference

new VideoBackgroundRenderer(config)

Params

  • config Object - Config object
  • config.container HTMLElement or string - the element or CSS selector for the element which will contain the video background
  • config.url string - YouTube or Vimeo video url
  • [config.fitMode] string - Behaves similarly to the CSS property object-fit, where fill is analogous to cover, and fit appears like contain
  • [config.useCustomFallbackImage] boolean - If true the renderer will display an image if the user agent is unable to display or autoplay the chosen video. The container element must have a child image with the class custom-fallback-image

VideoBackgroundRenderer.destroy()

Unbind all listeners, removes state-related classes, clears all timers.

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.