Video - carbon-design-system/carbon-for-ibm-dotcom-website GitHub Wiki

core UI component

The Video component utilizes the embeddable Kaltura player r2 to play video either on page or in Lightbox media viewer. Video allows custom override of all content returned by the Video service except video duration.

video-inline

Table of contents

Dependencies (4)

Used by (8)

Back links (12)

CTA (1)

  • media viewer to play the Video

Content block simple (1)

  • Video) and ends with a

Content group simple (1)

  • ...optional media item (Image with caption or Video)

Content item horizontal (2)

  • ...here is can be an Image with caption or a Video
  • See Image with caption and Video for more

Content item (2)

  • Video
  • See Video for more

Content section (1)

  • See Video for more

Lightbox media viewer (4)

  • an Image or Video depending on what the adopters
  • 2.1.2 | Video ID | If a
  • ID | If a Video ID is provided use the Video service to...
  • ...is provided use the Video service to get Video data and render

Resources

1. Caption

optional string

Logic
Condition Description
1.1 undefined (default) Caption prefilled by Video service's provided name.
1.2 String provided Adding a custom caption overrides the API call.

Duration is appended after string of text in parenthesis. (e.g. caption string (duration))


Back to top


2. Poster image

required component

Logic
Condition Description
2.1 undefined (default) Poster Image 2 prefilled by Video service's provided image.
2.1 Image Adding a custom Poster Image 2 overrides the API call.
Events
Events Description
2.3 onClick Plays video when clicked
Properties & values
Name Description
2.4 playing-mode Inline (default) replaces Poster Image 2.
Lightbox opens Lightbox media viewer 3.
2.5 aspect-ratio 16x9 (default), 9x16, 2x1, 1x2, 4x3, 3x4, 1x1

image See Image for more information.


Back to top


3. Lightbox media viewer

optional component

3.A Heading

optional string

Logic
Condition Description
3.A.2 if string provided Pass the string to Lightbox media viewer to override heading

3.B Copy

optional string

Logic
Condition Description
3.A.2 if string provided Pass the string to Lightbox media viewer to override copy

image See Lightbox media viewer for more information.


Back to top


⚠️ **GitHub.com Fallback** ⚠️