Video Canvas

Self-hosting

By default, the SDK loads content module data from the Video Canvas CDN. For self-hosted deployments, you serve the content from your own infrastructure and point the SDK at it.

Requirements

  • A content module zip file — download from the module page in this portal
  • A static file hosting solution (e.g. Apache, Nginx, S3, Cloudflare R2, or any CDN)
  • Approximately 150MB disk space per content module (varies by length and number of assets)

1. Download the content module

  1. Go to the module page in this portal
  2. Click Download to get the content module zip
  3. Extract the zip — you'll find a vc folder inside

2. Host the files

Upload the contents of the zip to your web server or CDN. The folder structure must be preserved exactly as-is. The end result should be that the files inside the zip are accessible by any clients you wish to view the Video Canvas.

For example, if you host the files at https://assets.example.com/vc, the SDK will expect to find the content module data at https://assets.example.com/vc/YOUR_MODULE_ID/data.json.

3. Configure CORS

If the content is hosted on a different origin than your application, your server must return the appropriate CORS headers:

Access-Control-Allow-Origin: https://your-app.example.com
Access-Control-Allow-Methods: GET, HEAD, OPTIONS
Access-Control-Allow-Headers: Content-Type

4. Set dataOrigin

Point the SDK at your hosted content using the dataOrigin property. This should be the URL of the vc folder:

lightbox({
  id: 'YOUR_MODULE_ID',
  dataOrigin: 'https://assets.example.com/vc',
  targetElement: '#play-button',
})

The SDK appends /YOUR_MODULE_ID/data.json to the dataOrigin to locate the content module data.

Updating modules

When a new version is released, it will appear in the Version History on the module page. Download the updated zip and replace the hosted files. No code changes are needed — the SDK will load the new content automatically.

Verifying your setup

Open your browser's developer tools and check the Network tab. You should see the SDK loading data.json and asset files from your origin. If you see CORS errors, double-check your server's CORS configuration.