Video Widget
The video widget plays a video from a URL.
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 Name | Description |
---|---|
card | Background card component |
primary | Primary video component |
Widget Properties
Name | Description |
---|---|
url | URL string, map or list of URLs |
value | Widget data value used to select the image from the URL map or list |
Common CSS Properties
Name | Description |
---|---|
--w-autoplay | Set to true to autoplay the video. Defaults to false. |
--w-end | End time of the video in seconds. |
--w-fullscreen | Set to true to allow the video to be played in fullscreen. Defaults to false. |
--w-loop | Set to true to loop the video. Defaults to false. |
--w-start | Start time of the video in seconds. |