Video

Pega branded Brightcove video player.

Published Last updated: 2.25.1 Change log Github NPM
Twig Usage {% include "@bolt-components-video/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, nd cue. For examp: <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 re enabled by default (ex. the playback plugin). For examp: <bolt-video disabled-plugins="playback">.

 string —
  • —
errorMessage

A custom message to be display upon a brigthcove error, will default to 'This video didnt load correctly. Refresh page to view.' is this field is left blank.

 string —
  • —
isBackgroundVideo
(deprecated)

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
Install Install npm install @bolt/components-video Dependencies @bolt/components-button @bolt/components-ratio @bolt/core-v3.x @bolt/lazy-queue dasherize lodash.isequal mousetrap