Summary

  • Overview
  • Adding Video Element
  • Options
    • Margin and Size
    • Source: URL and File Upload
    • Video File Upload In Online Editor
    • Video Player Options
    • Border and Shadow
    • Shading and Transparency
    • Other Settings
  • Expand to Background
  • Upload Button On Toolbar

Video Overview

The Video Element allows you to add a video to a page. You can link to YouTube, Vimeo, and your hosting or upload videos from your computer.

video-overview.png

Adding Video Element

You can add the Video Element for Add Element menu or a Block Preset or Design in the corresponding Video sections.

video-add.png

Video Options

Video Element has various Options you can use for styling and setting the player options.

Margin and Size

You can set the Video Element's width and height using the following options and edit the Margins. Also, you can simply adjust the Video Element size in the Editor by dragging the markers.

video-options-1.png

Source

Choose the Source for your Video. You can use the URL option and specify the URL to your Video hosted on YouTube, Vimeo, or any other server.

** URL **
For YouTube and Vimeo, copy the URL of the page with the Video. For videos on any other server, use the full link to the exact video file.

video-source-1.png

** File Upload **
You can also upload a video from your computer. Choose the Upload File option, and then you can choose from the already uploaded files or upload a new one.

video-source-2.png

Note, the size of the uploaded file should be less than 10MB.

Video File Upload In Online Editor

You can upload the Video both for the Video Element and Video Background in the Online Editor.

video-upload-online.png

Player Options

In the right panel, you can set the options for the video player. Note that the options are different for the specific Video Source option chosen.

If you use the Video from YouTube or Vimeo, you can set the following options:

video-options-2.png

You can set only the Fit option for the custom uploaded video files. It allows selecting how a video will fit the container size: Cover or Contain.

Note, if the Automatically start to play option is selected, a video becomes Muted by default due to the browser's requirements. You cannot have a video with autoplay on start if you need the sound to be on.

Border and Shadow

Here you can find the settings to enable Border and Shadow options and design them.

For Border, you can select the color and width; for the Shadow, you can choose one of the ready presets or set the custom shadow options.

video-options-5.png

Shading and Transparency

To add a more design look to your Video, use the Shading and Transparency options that allow you to add the dark shade and make your Video transparent, so the block background appears visible under the Video.

video-options-6.png

Other Settings

Here you can find other standard settings available for the Video Element. You can add a custom CSS class name and use the Hide On Devices option to hide this control in the specific response views.

video-options-4.png

Expand To Background

The Video Element can be stretched to the block size using the Expand To Background option in the top right corner of the element in the Editor.

expand-to-background.png

That will transform the Video from the Video control into the video background option of the Block. After expanding, you will see the same options for the Video Element and Background of the Block.

block-background.png

The video background is always set to autoplay mode in a loop.

Upload Button On Toolbar

You can use the Upload Button in the Change Video dialog in the Editor and the Video Context Toolbar.

upload-button-change-video.png

## Summary - Overview - Adding Video Element - Options - Margin and Size - Source: URL and File Upload - Video File Upload In Online Editor - Video Player Options - Border and Shadow - Shading and Transparency - Other Settings - Expand to Background - Upload Button On Toolbar ## Video Overview The Video Element allows you to add a video to a page. You can link to YouTube, Vimeo, and your hosting or upload videos from your computer. !video-overview.png! ## Adding Video Element You can add the Video Element for Add Element menu or a Block Preset or Design in the corresponding Video sections. !video-add.png! ## Video Options Video Element has various Options you can use for styling and setting the player options. ### Margin and Size You can set the Video Element's width and height using the following options and edit the Margins. Also, you can simply adjust the Video Element size in the Editor by dragging the markers. !video-options-1.png! ### Source Choose the Source for your Video. You can use the URL option and specify the URL to your Video hosted on YouTube, Vimeo, or any other server. ** URL ** For YouTube and Vimeo, copy the URL of the page with the Video. For videos on any other server, use the full link to the exact video file. !video-source-1.png! ** File Upload ** You can also upload a video from your computer. Choose the Upload File option, and then you can choose from the already uploaded files or upload a new one. !video-source-2.png! **Note, the size of the uploaded file should be less than 10MB.** ### Video File Upload In Online Editor You can upload the Video both for the Video Element and Video Background in the Online Editor. !video-upload-online.png! ## Player Options In the right panel, you can set the options for the video player. Note that the options are different for the specific Video Source option chosen. If you use the Video from YouTube or Vimeo, you can set the following options: !video-options-2.png! You can set only the Fit option for the custom uploaded video files. It allows selecting how a video will fit the container size: Cover or Contain. Note, if the Automatically start to play option is selected, a video becomes Muted by default due to the browser's requirements. You cannot have a video with autoplay on start if you need the sound to be on. ## Border and Shadow Here you can find the settings to enable Border and Shadow options and design them. For Border, you can select the color and width; for the Shadow, you can choose one of the ready presets or set the custom shadow options. !video-options-5.png! ## Shading and Transparency To add a more design look to your Video, use the Shading and Transparency options that allow you to add the dark shade and make your Video transparent, so the block background appears visible under the Video. !video-options-6.png! ## Other Settings Here you can find other standard settings available for the Video Element. You can add a custom CSS class name and use the Hide On Devices option to hide this control in the specific response views. !video-options-4.png! ## Expand To Background The Video Element can be stretched to the block size using the Expand To Background option in the top right corner of the element in the Editor. !expand-to-background.png! That will transform the Video from the Video control into the video background option of the Block. After expanding, you will see the same options for the Video Element and Background of the Block. !block-background.png! The video background is always set to autoplay mode in a loop. ## Upload Button On Toolbar You can use the Upload Button in the Change Video dialog in the Editor and the Video Context Toolbar. !upload-button-change-video.png! ##