Components

video-player

5min

This component is used to play a video in stories﻿, headers﻿, or as components in a jig.default﻿. 
﻿Configuration options﻿
﻿
Core structure
﻿
URL
Specify the URL for the video. The URL format can be:
A direct URL, for example, https://player.vimeo.com/video/76979871﻿
An embeded URL, for example,
<iframe src="https://player.vimeo.com/video/76979871?quality=720p"></iframe>
A URL referenced in a datasource, for example, 
url: [email protected]
Other options
﻿
autoplay
Set to true will automatically start playing the video. Set to false requires you to press the play button. Default setting is false.
loop
 For continuous looping of the video set the property to true. Default setting is false.
ratio
There are 2 options:
16:9
4:3
title
 The title of the video.
- With a 16:9 ratio, the text overlays at the bottom left of the video. 
- With a 4:3 ratio the text displays under the video.
Title and subtitle must be configured together for the text to display on the video. Using either one on their own will result in no text being displayed.
subtitle
The subtitle of the video. 
- With a 16:9 ratio, the text overlays at the bottom left of the video. 
- With a 4:3 ratio the text displays under the video.
Title and subtitle must be configured together for the text to display on the video. Using either one on their own will result in no text being displayed.
Considerations
We recommend using a paid Vimeo subscription which gives you access to the mp4 link that allows the byline and other attributes to be hidden. You require a paid Vimeo membership to obtain the mp4 Vimeo link. Follow the steps in Vimeo direct links to video files to copy the mp4 link.
For Vimeo videos, set up your OAuth token once in the Vimeo app and then use it for all videos. See the following resources on creating tokens: 
﻿How-do-I-create-an-API-app﻿
﻿How-do-I-generate-a-personal-access-token﻿
﻿How-can-I-test-the-API-on-the-Developer-Site﻿
When configuring video settings for Vimeo and YouTube videos, preferably use the settings within the respective apps first before setting URL parameters, this ensure videos display as expected in the .
For the configuration options for the video story-group, see the story-group component.
﻿Examples and code snippets ﻿
video-player
﻿
This example shows a video player inside a  . The ratio is only set for non-YouTube videos.
Examples:
See the full example using static data on GitHub. 
See the full example using dynamic data on GitHub. 
Datasource:
See the full datasource for dynamic data on GitHub. 
videoplayer (static)
videoplayer (dynamic)
datasources (dynamic)
children:
  - type: component.video-player
    options:
      url: https://cdn.pixabay.com/video/2021/09/15/88697-606080045_small.mp4
      title: Team work
      subtitle: Video-player usage examples
      autoplay: false
      loop: true
      ratio: 16:9
children:
  - type: component.video-player
    options:
      url: https://cdn.pixabay.com/video/2021/09/15/88697-606080045_small.mp4
      title: Team work
      subtitle: Video-player usage examples
      autoplay: false
      loop: true
      ratio: 16:9
﻿
video - player
﻿
This example shows the video player as a jig header. Ideal for product videos.
Examples:
See the complete example using static data on GitHub.
See the complete example using dynamic data on GitHub. 
Datasource:
See the complete datasource for dynamic data on GitHub. 
videoplayer-header (static)
videoplayer-header (dynamic)
datasources (dynamic)
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.video-player
      options:
        url: [email protected]-player-dynamic.uri
        autoplay: true
        loop: true
        ratio: "16:9"
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.video-player
      options:
        url: =@ctx.datasources.video-player-dynamic.uri
        autoplay: true
        loop: true
        ratio: "16:9"
﻿
﻿

Core structure
URL	Specify the URL for the video. The URL format can be: A direct URL, for example, https://player.vimeo.com/video/76979871 An embeded URL, for example, <iframe src="https://player.vimeo.com/video/76979871?quality=720p"></iframe> A URL referenced in a datasource, for example, url: [email protected]

Other options
autoplay	Set to true will automatically start playing the video. Set to false requires you to press the play button. Default setting is false.
loop	For continuous looping of the video set the property to true. Default setting is false.
ratio	There are 2 options: 16:9 4:3
title	The title of the video. - With a 16:9 ratio, the text overlays at the bottom left of the video. - With a 4:3 ratio the text displays under the video. Title and subtitle must be configured together for the text to display on the video. Using either one on their own will result in no text being displayed.
subtitle	The subtitle of the video. - With a 16:9 ratio, the text overlays at the bottom left of the video. - With a 4:3 ratio the text displays under the video. Title and subtitle must be configured together for the text to display on the video. Using either one on their own will result in no text being displayed.