Video Element

Last Update: February 20, 2023

The Video Element offers the ability for users to post self-hosted video clips easily to their Avada websites. See below for more information, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Video Element

The Video Element is easy to add anywhere in your content. Follow these simple steps below. To start, just add the element to your desired column.

Add your video file in the first option, Video MP4 Upload. You can either select one already in the media library, or upload one. You can also upload a WebM file, but this is optional.

Once you have added your video file, continue configuring the element with your preferred function and styling options.

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in Avada > Options > Avada Builder Elements > Video section. Also, please not that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.


Video MP4 UploadAdd your MP4 video file. This format must be included to render your video with cross-browser compatibility.
Video WebM UploadAdd your WebM video file. This is optional, only MP4 is required to render your video with cross-browser compatibility.
Video Max WidthSet the maximum width the video should take up. Enter value in pixel (px) or percentage (%), ex: 200px. Leave empty to use full video width.
Video ControlsControls whether the video controls should show or not.
Video PreloadingControls how / if the browser should preload the video. Choose "Metadata" if only the video metadata should be preloaded on page load (in Chrome needed for the preview image to load) or "Auto" to preload the full video on page load.
Loop VideoControls whether the video should loop or not.
Autoplay VideoIMPORTANT: In some modern browsers, videos with sound won't be autoplayed.
Mute VideoIMPORTANT: In some modern browsers, videos with sound won't be autoplayed.
Preview ImageUpload an image to display as a video preview. IMPORTANT: In Chrome the preview image will only be displayed if "Video Preloading" is set to "Metadata".
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.


Overlay ColorControls the overlay color of the video element.
Border RadiusEnter values including any valid CSS unit, ex: 10px.
AlignmentSelect the video's alignment.

In this article