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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us