Components

video-player

7min

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 Vimeo video 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=57447761
      title: Team work
      subtitle: Video-player usage examples
      autoplay: false
      loop: true
      ratio: 16:9
children:
  - type: component.video-player
    options:
      url: https://player.vimeo.com/external/510534971.sd.mp4?s=feaf03f65dc961bf98dcecbbbdcf21db84204536&profile_id=164&oauth2_token_id=57447761
      title: Team work
      subtitle: Video-player usage examples
      autoplay: false
      loop: true
      ratio: 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=57447761
        autoplay: true
        loop: true
        ratio: "16:9"
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=57447761
        autoplay: true
        loop: true
        ratio: "16:9"
﻿
See also
﻿Developer reference  
﻿Relevant examples (Github)﻿
﻿