2.22.0

Video

Video Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-video
Source code
View on Github
Dependencies
@bolt/components-button @bolt/components-ratio @bolt/core-v3.x dasherize lodash.isequal mousetrap

Overview

Stylistic video. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/video
Overview Usage Schema Edit this page Testing Steps

Usage

{% include "@bolt/video.twig" with { videoId: "5609376179001", accountId: "1900410236", playerId: "r1CAdLzTW", showMeta: true, showMetaTitle: false } only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
videoId

Brightcove ID for this video.

 string , number —
  • —
playerId

Brightcover Player ID.

 string —
  • —
accountID

ID of the Brightcove account that owns the video.

 string , number —
  • —
videoUuid

A unique identifying string, randomly generated if not provided.

 string —
  • —
share_description

A custom title to use in the share overlay

 string Share This Video
  • —
ratio

Maintain video ratio.

 boolean —
  • —
collapsed

Should the video be collapsed on load.

 boolean —
  • —
showMeta

Should the video show meta data.

 boolean true
  • —
showMetaTitle

Should the video show meta title.

 boolean true
  • —
controls

Should the video controls be available.

 boolean true
  • —
autoplay

Should the video auto-play on load.

 boolean false
  • —
loop

Should the video loop.

 boolean false
  • —
on_init

The on_init config allows for an external Javascript function inlined on the page to add any 3rd party scripts or video plugins to a <bolt-video> player instance when initializing. Please see the new recommended enabled_plugins and disabled_plugins options below.

 string —
  • —
enabled_plugins

Space-separated list of built-in <bolt-video> plugins for Brightcove to enable. Current include social, email, playback, and cue. For example: <bolt-video enabled-plugins="cue social email playback">.

 string —
  • —
disabled_plugins

Space-separated list of any built-in <bolt-video> plugins for Brightcove to disable. Used to opt-out of any video plugins that are enabled by default (ex. the playback plugin). For example: <bolt-video disabled-plugins="playback">.

 string —
  • —
isBackgroundVideo

Background video feature will be removed with Bolt v3.0

 —
  • —

Advanced Schema Options

default_plugins

An array of the default <bolt-video> player plugins that are globally enabled by default.

 array —
  • playback
available_plugins

The built-in <bolt-video> player plugins that are availble to be used in any player instance without requiring the use of any extra Javascript.

 array —
  • playback, social, email, cue
Debug Panel