Adding a video widget
How to add videos and some of the options that are available to you.
1. .Click the blue plus button for the section where you want to add the video
Choose video from the widgets panel.
2. Select whether you want to upload a video or add a video from your project library. Alternatively, if the video is YouTube or Vimeo, simply paste the link.
3. Here you can define if the video should show its controls, eg: play, pause, audio, ... .
Autoplay will start the video when it is scrolled into view and pause the video when it scrolls out of view.
Loop will restart the video when it's done playing.
4. Once the video is added you can use the properties in the video palette to set the width to match the design you have in mind.
| Attribute | Value | Default | Description |
|---|---|---|---|
| src* | url.mp4 | This is a link to the mp4 video file | |
| poster | url.jpg | This is a link to the jpg image file that is used as the video poster, displayed before the video is loaded | |
| poster-fade-out-speed | number | 300 | Duration in miliseconds of the fade out of the poster when the video starts playing. More static videos look better with a larger value, dynamic videos are better with a lower value. |
| controls | bool | false | Will show the native controls at the bottom of the video |
| loop | bool | false | Will keep starting the video from the beginning when it gets to the end |
| muted | bool | false | Will disable the audio of the video |
| autoplay | bool | false | Will automatically start the video when it scrolls into view |
| preload | none | none | Will not start preloading a video or it's meta data (eg: size, name, …) |
| metadata | Will start preloading basic information about the video, but the cache the video | ||
| auto | Will load the meta data and start caching the video | ||
| play-icon | empty | Will show a default play button in the center of the video | |
| url.jpg | Will use the url as a reference to the play icon to be displayed | ||
| fill | none | none | No fill option will be applied |
| cover | The video will be scaled to completely cover it's parent element | ||
| contain | The video will be scaled to the largest size possible without cropping any of the video | ||
| auto | Determine width by looking at width, aspect ratio and or fill settings | ||
| aspectratio | number | 1.7777 | Aspect ratio if the video file, defaults to 16:9 |
| foxalx | number | 50 | Horizontal coordinate expressed in percent of what point in the video should be preferably visible |
| focaly | number | 50 | Horizontal coordinate expressed in percent of what point in the video should be preferably visible |
| Force-canvas-player | bool | false | Forces the use of a canvas player on mobile |
- The video you upload will automatically be converted to formats that maximize its compatibility across major browsers and mobile operating systems.
- You can auto-play video on your phone by adding the following Angular attribute in the Video palette: force-canvas-player="true". But keep in mind that this is data-intensive and no audio will be included, so this really works best for experiences that are short and for which synchronized audio is not essential.
- Fullscreen video and actions are not supported on Firefox browsers due to restrictions imposed by Mozilla.