This component is used to play a video in stories, headers, or as components in a jig.default.
Configuration options
Some properties are common to all components, see Common component properties for a list and their configuration options.
The core structure includes: url
Other options:
title and subtitle - The title and subtitle for your video
autoplay - The boolean value for the automatic start of playing the video
loop - The boolean value for looping the video
ratio - There are 2 options:
16:9
3:4
Considerations
When using a Vimeovideo in the video-player component, only the mp4 format is supported. You require a paid Vimeo membership to obtain the mp4 Vimeo link. Follow the steps of the Vimeo direct links to video files to copy the mp4 link.
For the details of the configuration options for the video story-group, please see the story-group component.
Examples and code snippets
Video player as children of the jig
This example shows a video player inside a jig. 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://player.vimeo.com/external/510534971.sd.mp4?s=feaf03f65dc961bf98dcecbbbdcf21db84204536&profile_id=164&oauth2_token_id=57447761title: Team work
subtitle: Video-player usage examples
autoplay:falseloop:trueratio: 16:9
Video player in header
This example shows the video player as a jig header. Ideal for product 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-header (static)
videoplayer-header (dynamic)
datasources (dynamic)
|
header:type: component.jig-header
options:height: medium
children:type: component.video-player
options:url: https://player.vimeo.com/external/510534971.sd.mp4?s=feaf03f65dc961bf98dcecbbbdcf21db84204536&profile_id=164&oauth2_token_id=57447761autoplay:trueloop:trueratio:"16:9"