2.12.1Video Component in Bolt
Stylistic video. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
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) |
|---|---|---|---|---|
|
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
|
Brightcove ID for this video. |
string , number |
— |
|
|
|
Brightcover Player ID. |
string
| — |
|
|
|
ID of the Brightcove account that owns the video. |
string , number |
— |
|
|
|
A unique identifying string, randomly generated if not provided. |
string
| — |
|
|
|
A custom title to use in the share overlay |
string
|
Share This Video
|
|
|
|
Maintain video ratio. |
boolean
| — |
|
|
|
Should the video be collapsed on load. |
boolean
| — |
|
|
|
Should the video show meta data. |
boolean
|
true
|
|
|
|
Should the video show meta title. |
boolean
|
true
|
|
|
|
Should the video controls be available. |
boolean
|
true
|
|
|
|
Should the video auto-play on load. |
boolean
|
false
|
|
|
|
Should the video loop. |
boolean
|
false
|
|
|
|
The |
string
| — |
|
|
|
Space-separated list of built-in |
string
| — |
|
|
|
Space-separated list of any built-in |
string
| — |
|
|
|
Background video feature will be removed with Bolt v3.0 |
| — |
|
|
|
An array of the default |
array
| — |
|
|
|
The built-in |
array
| — |
|
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 and an inline script:
This video has showMetaTitle set to false to hide the title from the video player, so you can pass the title to other markup.
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.