Skip to content

Video Widget

The video widget plays a video from a URL.

Video Widget

The video URL can take one of three formats:

  • Simple string
  • Map of URLs candidates
  • List of URL candidates

String URL

If it is a simple URL string that video file will be played.

js
url: 'https://www.youtube.com/embed/eIG5z-DcrIo'

Map of URLs

If it is a map, the widget value is used as a key to the map to select a corresponding URL. A key of "*" will be selected if there is no better match.

js
url: {
    sunny: 'https://www.youtube.com/embed/eIG5z-sunny'
    cloudy: 'https://www.youtube.com/embed/eIG5z-cloudy',
    '*': 'https://www.youtube.com/embed/eIG5z-default',
}

List of URLs

If the URL value is a list, the list must contain candidates with expressions that are evaluated at run-time to select the best match. For example:

js
[
    { 
        expression: 'temp > 40', 
        value: 'https://www.youtube.com/embed/eIG5z-DcrIo',
    },
    {
        expression: true,
        value: 'https://www.youtube.com/embed/eIG5z-other'
    }
]

Autoplay of video is typically prevented by the browser and may require the video to be muted at first.

Configurable components

Class NameDescription
cardBackground card component
primaryPrimary video component

Widget Properties

NameDescription
urlURL string, map or list of URLs
valueWidget data value used to select the image from the URL map or list

Common CSS Properties

NameDescription
--w-autoplaySet to true to autoplay the video. Defaults to false.
--w-endEnd time of the video in seconds.
--w-fullscreenSet to true to allow the video to be played in fullscreen. Defaults to false.
--w-loopSet to true to loop the video. Defaults to false.
--w-startStart time of the video in seconds.