Video Tool

To add a video select the Video tool from the toolbar, then click anywhere in the page or canvas.

Video options

There are several options and properties in the Inspector panel. This includes options for: positioning, changing the width and height, stretch to width, opacity, adjusting rotation and corner radius, adding a new state, changing the video, applying the preview image and adding a drop shadow.

Refer to the image above to identify video properties panels.

1. Width and height
2. Stretch To Width
3. Opacity
4. Rotation, corner radius
5. Video
6. Preview
7. Drop Shadow

Learn more about how to use video properties below.

Width and height

Those properties allow changing the size of the button, once hovering on the letter W (width) or H (height) should appear a left-right arrow which allows dragging to the desired size, click and drag, and release after the perfect size is reached.

Alternatively pressing on the number close to W or H letters will allow entering the desired size in px (pixel).

Once the lock icon is pressed it will change to a locked one, this means that when the button will change size it will change proportionally.

Stretch to Width

Clicking this property will set the video to 100% which is equal to the width of the browser window.

Opacity

Once dragging or typing another value, video transparency will change accordingly, it could be from 0 to 100.

Rotation, corner radius

Once hovering on the angle icon should appear a left-right arrow that allows dragging to the desired radius, click and drag, and release after the ideal angle was reached.

Right drag - rectangle will rotate in the right (positive value) direction, left drag - it will rotate to the left (negative value).

Alternatively pressing on the number will allow typing the exact degree amount.

The corner radius works in the same way as the angle, but once the action performs it will change the radius.

It could be combined with rotation.

Pressing the icon that indicates corners on the right side just close to the corner radius will allow changing the radius per corner

The order is:

• Top right corner

• Bottom right corner

• Bottom left corner

• Top left corner

Video

This property allows changing the default video to desired one, it could be a video from YouTube or any video from the device.

Insert the YouTube link in the designated field and the video will change instantly.

Enable or disable any additional YouTube video options:

• Autoplay - video will start playing instantly without the need to press the play button
• 
Mute - video will play without any audio
• 
Loop - once the video ends it will start from the beginning, for an unlimited time

To make sure that all the additional options work great in the top right corner there is an eye icon that allows previewing the entire page.

Important: Video must be placed inside the page, not on canvas, in that way it will be displayed in preview.

Clicking on the MP4 Video title will switch the video tab.

Don’t worry if pressed by accident, YouTube video settings will remain in place.

Press on Choose File and upload the desired video, it allows uploading a video from a device up to 10MB, .mp4 or .mov format

Currently for paid accounts only.

Enable or disable any video options, disabling Controls will show video without any clickable option, like an animated image, it fits perfectly when the video is supposed to be as a background.

Preview

This property allows choosing the desired image for the video preview, it could be an image from the device or any Unsplash – free to use stock photo image.

Drag and drop to the gray designated space or press Choose File for uploading the right image.

Once the preview image was uploaded, there will appear a hidden menu that contains additional properties such as Icon, Overlay color and Playback mode.

Choose any icon instead of the default play icon, play with icon color or icon size.

Overlay color will add a layer of additional color, this ussaly works perfect when video needs to be fade.

Choose Playback mode, from those 2 options:

• Inline – after pressing play icon it will start to play in the same place.
• Open in new – after pressing play icon the video will start to play in a new tab.

Drop Shadow

This property is usually used for giving the impression that the object is raised above the objects behind it.

Just press on the plus icon to add it.

By default, it will be assigned a black color (#000000) with 25% of opacity, with the X (right) and Y (down) axis to 1px, and with the blurriness to 3px.

Drop Shadow property could be adjusted to your needs, just click on the icon close to the first number in the row and the additional panel will appear immediately.