video-player

This component is used to play a video in 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.

Core structure
URL	Specify the URL for the video. The URL format can be: A direct URL, for example, - 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:

  1. How-do-I-create-an-API-app

  2. How-do-I-generate-a-personal-access-token

  3. 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 Jigx App.

Examples and code snippets

Video player as children of the jig

video-player

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)

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: "4:3"

videoplayer (dynamic)

datasources (dynamic)

Video player in header

video-player in header

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)

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.video-player
      options:
        url: https://cdn.pixabay.com/video/2023/10/01/183108-870151713_small.mp4
        autoplay: true
        loop: true
        ratio: "16:9"

videoplayer-header (dynamic)

datasources (dynamic)