Video Element

Last Update: April 10, 2024

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.

General

HeadingDescription
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.

Design

HeadingDescription
Overlay ColorControls the overlay color of the video element.
Border RadiusEnter values including any valid CSS unit, ex: 10px.
Box ShadowSet to "Yes" to enable box shadows.
Box Shadow PositionSet the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.
Box Shadow Blur RadiusSet the blur radius of the box shadow. In pixels.
Box Shadow Spread RadiusSet the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.
Box Shadow ColorControls the color of the box shadow.
AlignmentSelect the video's alignment.
MarginSpacing above and below the video. Enter values including any valid CSS unit, ex: 4%.

In this article