2.5.2

Video

Video Component in Bolt

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 %}

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 or number
playerId

Brightcover Player ID.

string
accountID

ID of the Brightcove account that owns the video.

string or 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
isBackgroundVideo

Set to true if the video is a background.

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