Videos
Bonzai avatar
Written by Bonzai
Updated over a week ago

In Canvas, you can add videos either by dragging them to the assets library or clicking on upload button. Once videos are added to the assets library, just drag and drop them to the workspace and you can create your masterpiece.

Important: Canvas supports only mp4 video formats.

Using the Properties tab on the right panel, you can change the properties of the video element.

General

Video Name: Displays the name of the video. You can change the name of the video by selecting it and entering the desired name.

Position: You can define the positioning of the video the workspace. The positioning of the video is relative to the workspace.In the following screenshot, the video is placed at Zero pixels from the left edge and the top edge. It implies that the video is placed at the top left corner of the workspace.

While manually entering the values for positioning, you cannot enter decimal values.

Height and Width: You can resize the video element by dragging the corner handles of the video. Alternatively, you can enter the size of the video on the size fields.

While manually entering the values for resizing, you cannot enter decimal values.

Select lock to keep the aspect ratio locked when resizing the video.

Rotation: You can rotate the video by using the rotate lever or entering the value in the angle field.

The angle field displays values from 0 to 360 when the icon is rotated. While using the rotation feature to animate the video, values must be entered in multiples of 360 to signify how many times the rotation must happen.

Opacity: You can change the opacity of the video by dragging the slider.

Asset

Replace: Displays the properties of the video that you have added to the workspace. You can replace the video by clicking Replace and selecting a video from the assets library.

Behavior

Keep initial state as hidden: Upon page load, keeps the video hidden until a configured action is not performed. You can configure the action on the Events tab.

Autoplay:

Video Controls: As a designer decide how and when your customers will see the control options for a video that is rendered.

The following three options are available for visibility of video controls:

Always Show :

Show only on Hover (desktop)

Always Hide

Poster Image for Video: Poster Image is the image that is shown before a creative is rendered. Canvas 2.0 allows you to configure the start card by selecting the default image or you can select any custom image as the poster image for your video.

You can select from the following two options:

  • Show Default Image: Selecting this option displays the 10th frame as the starting image before the video plays.

  • Select Custom Image: Selecting this option allows you to select an image as the starting image before the video plays.

At the End of Video: This feature allows you to select what is displayed at the end of the video.

  • Show Last Frame: The Show Last Frame option ends the video at the last frame of the video.

  • Poster Image for Video: The Poster Image for Video ends the video with the Poster Image that you had selected in the Poster Image section.

Other Options: Other options allow you to control how the video ends. You can select from the following two options:

  • Exit fullscreen at the End: When the creative is rendered, viewers might view the creative in fullscreen. Selecting this option, exits the fullscreen when the video ends in the rendered creative.

  • Show Play Button: Selecting this option shows the Play button to play the video all over again when the video in the rendered creative ends.

Responsive

Position of the Video: Position refers to the position of the video on the workspace. Pinning an video to an edge instructs that element to move as the edge itself moves. When an element is pinned to non-opposing edges on the workspace, the distance of the element from those edges of workspace remains fixed or proportional.

You can define the position of the video as Float or Fixed.

  • Float: When selected, the position of the element on the workspace is fixed such that when the rendered creative size is increased or decreased, the element is placed proportionately. For example, in a 1000px wide workspace if an element is placed at 200px from the left edge, then in a 2000 px wide workspace the element will be placed 400px away from the left edge.

  • Fixed: When selected, the position of the element is fixed from the edges irrespective of the size of the rendered creative. For example, if an element is pinned 10 pixels away from the top and the left edge, as the workspace size changes, the position of the element will still be 10 pixels away from the top and the left edge.

Dimension: Dimension refers to the fluidity or the fixity of the video container. You can control the resizing aspect of any video by using the two arrows in the Dimension section. When the size of the document changes, the width and height of the video container also changes. If you enable either or both the arrows, the container of the video changes accordingly in height and width. By default, both the arrows are enabled.

To change the dimension of the video in the rendered creative, perform the following:

  • To enable resizing the height of the video, click the up-down arrow.

  • To enable resizing the width of the video, click the left-right arrow.

Did this answer your question?