Video Element

24/08/2020

The Video Element was released in Avada 6.1, and 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. For more details, please see our Privacy Policy.
I Accept
View Element Demo Page

How To Use The Video Element

The Video Element is easy to add anywhere in your content. Follow these simple steps below.

Step 1. Edit an existing page. Ensure the Avada Builder is activated, by clicking the ‘Use Avada Builder’ button on top of the page editor.

Step 2. Choose the Container and Column you wish to add the Alert Element into. Click on Add new Element.

Step 3. Choose Video from the Elements List.

Step 4. 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.

Step 5. 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

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in Avada > Options > Avada Builder Elements > Video section.

General Tab

  • Video MP4 Upload – Upload or select your video file to be loaded into the player.

  • Video WebM Upload – Add your WebM video file. This is optional; only MP4 is required to render your video with cross-browser compatibility.

  • Video Max Width – Set the maximum width the video should take up. Enter value in pixel (px) or percentage (%), ex: 200px. Leave empty to use full video width. NOTE: Percentage values will be with respect to the original video width and not the wrapping container width.

  • Video Controls – Controls whether the video controls should show or not.

  • Video Preloading – Controls 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 Video – Turn on to loop the media when it is played.

  • Autoplay Video – Turn on to autoplay the media upon page load. IMPORTANT: In some modern browsers, videos with sound won’t be autoplayed.

  • Mute Video – IMPORTANT: In some modern browsers, videos with sound won’t be autoplayed.

  • Preview Image – Upload 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 Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab in the Theme Options.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

View The Options Screen

Design Tab

  • Overlay Color – Controls the overlay color of the video element.
  • Border Radius – Set the border radius of the element. In pixels.

  • Box Shadow – Set to Yes to enable a box shadow for the element.

  • Box Shadow Position – Set 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 Radius – Set the blur radius of the box shadow. In pixels.

  • Box Shadow Spread Radius – Set 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 Color – Set the color of the Box Shadow.

  • Alignment – Select the video’s alignment. Choose from Text Flow, Left, Center, & Right.

  • Margin – Set the top and bottom margin of the element (spacing above and below the video). Enter values including any valid CSS unit, ex: 4%

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > Video.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Maximum Width – Set the maximum width of the video using a valid CSS value.

  • Video Controls – Controls whether the video controls should show or not.

  • Video Preloading – Controls how / if the browser should preload the video. Choose “Metadata” if only the video metadata should be preloaded on page load or “Auto” to preload the full video on page load.

View The Options Screen