Video

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

Install via NPM
npm install @bolt/video
  {% include "@bolt/video.twig" with {
  videoId: "5609376179001",
  accountId: "1900410236",
  playerId: "r1CAdLzTW",
  showMeta: true,
  showMetaTitle: false
} only %}
Name Type Value(s) Description Default
attributes object

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

N/A
videoId string OR number

Brightcove ID for this video.

N/A
playerId string

Brightcover Player ID.

N/A
accountID string OR number

ID of the Brightcove account that owns the video.

N/A
videoUuid string

A unique identifying string, randomly generated if not provided.

N/A
share_description string

A custom title to use in the share overlay

Share This Video
ratio boolean

Maintain video ratio.

N/A
collapsed boolean

Should the video be collapsed on load.

N/A
showMeta boolean

Should the video show meta data.

true
showMetaTitle boolean

Should the video show meta title.

true
controls boolean

Should the video controls be available.

true
autoplay boolean

Should the video auto-play on load.

false
loop boolean

Should the video loop.

false
isBackgroundVideo boolean

Set to true if the video is a background.

false
on_init string

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.

N/A
enabled_plugins string

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

N/A
disabled_plugins string

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

N/A

This video has showMeta set to true and showMetaTitle set to true.

This video has showMeta set to false.

This video has showMeta set to true and showMetaTitle set to false.

This video has controls set to false, you cannot interact with the video player but you can create external control to interact with it:

This video has external controls:

This video has external controls and an inline script:

This video is coming from the band's background.

This video has attributes for email share. Inline script is required for the email share.

This video has share_description set to Share me!.

This video has a cue point defined inside the Brightcove interface.

This video has showMetaTitle set to false to hide the title from the video player, so you can pass the title to other markup.

Figure and Figcaption

EE: Transforming the Customer Journey Through 1:1 Customer Engagement (Suzanne Woolley)

Headline with Video

EE: Transforming the Customer Journey Through 1:1 Customer Engagement (Suzanne Woolley)

When used straight out of the box, the playback plugin is enabled by default.

This video has disabled_plugins set to playback. Therefore disabling the default playback plugin.

Accepted plugins: cue, social, playback, and email.

This video has enabled_plugins set to a few values. Therefore enabling the plugins defined in the values.

Accepted plugins: cue, social, playback, and email.

This video has an external plugins script defined through on_init.

This video has an external plugins script defined through on_init and enabled_plugins set to certain values.