video docs

2.15.2

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 —
  • —
video_id

Brightcove ID for this video.

 string , number —
  • —
player_id

Brightcover Player ID.

 string —
  • —
account_id

ID of the Brightcove account that owns the video.

 string , number —
  • —
video_uuid

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 —
  • —
show_meta

Should the video show meta data.

 boolean true
  • —
show_meta_title

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 —
  • —
is_background_video

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

video

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

Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x

video hide meta title and duration

This video has showMeta set to false.

Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x

video hide meta title only

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

Current Time 0:00
Duration 2:14
Loaded: 0%
Stream Type LIVE
Remaining Time 2:14
 
1x

video hide controls

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

Play or pause

Current Time 0:00
Duration 3:36
Loaded: 0%
Stream Type LIVE
Remaining Time 3:36
 
1x

video with external controls

This video has external controls:

Play or pause

Current Time 0:00
Duration 1:52
Loaded: 0%
Stream Type LIVE
Remaining Time 1:52
 
1x

video with inline script and external controls

This video has external controls and an inline script:

Play or pause

Current Time 0:00
Duration -:-
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x

video with email share

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

Current Time 0:00
Duration 1:52
Loaded: 0%
Stream Type LIVE
Remaining Time 1:52
 
1x

video with custom share text

This video has share_description set to Share me!.

Current Time 0:00
Duration 2:14
Loaded: 0%
Stream Type LIVE
Remaining Time 2:14
 
1x

video with cue points

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

Current Time 0:00
Duration 3:20
Loaded: 0%
Stream Type LIVE
Remaining Time 3:20
 
1x

video with external title

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

Headline with Video

default plugins

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

Current Time 0:00
Duration 1:52
Loaded: 0%
Stream Type LIVE
Remaining Time 1:52
 
1x

disabled plugins

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

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

Current Time 0:00
Duration 1:52
Loaded: 0%
Stream Type LIVE
Remaining Time 1:52
 
1x

enabled plugins

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.

Current Time 0:00
Duration 1:52
Loaded: 0%
Stream Type LIVE
Remaining Time 1:52
 
1x

external plugins script

This video has an external plugins script defined through on_init.

Current Time 0:00
Duration 1:52
Loaded: 0%
Stream Type LIVE
Remaining Time 1:52
 
1x

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

Current Time 0:00
Duration 3:20
Loaded: 0%
Stream Type LIVE
Remaining Time 3:20
 
1x
Debug Panel