Avada Video Tutorial – How To Use The Video Element

Published On: April 11th, 2023Categories: Avada, Video Training609 words3 min read

How To Use The Video Element


Hi everyone! In this series of videos, we’re looking at how to use the Fusion Builder elements. Today, we’re looking at how to use the Video element. Let’s begin!

This is a brand new element in Avada 6.1, and provides support for self-hosted videos in Fusion Builder. I’m going to add the element here on the resume demo, in the middle of the recent project section. The element has two tabs: General and Design.

At the top of the General tab, the first option is Video MP4 Upload, where you add your MP4 file. I’ll just add a video here from the media library, and when I do, it appears on the page. The MP4 format must be included to render your video with cross-browser compatibility. You can also upload the video in WebM format with the next option. This is a format growing fast in popularity, but it’s still optional.

The next option is Video Max Width. You can set this in pixels or a percentage. If you leave it empty, the full video width will be used. You can show or hide the video controls with the next options, and with Video Pre-Loading, you can control if and how the browser should preload the video. Choose Metadata if only the video metadata should be pre-loaded on page load or Auto to preload the full video on page load.

Following these are options for looping, auto-playing, and muting the video, all of which have simple yes-no choices. In this case, I’m going to set all three to “No”. The last unique option is Preview Image. If you’d like to add a preview image for the video, which shows before it’s played, with the video controls overlaid so it’s obvious it’s a video.

Finally, there is the usual Element Visibility option, which allows you to choose whether the element is displayed on various screen sizes, and the CSS Class and CSS ID fields, which allow you to further customize the element with custom CSS.

On the Design tab, there are a few more options to control the look of the video. First up is Overlay Color, which, as the name suggests, overlays a color over the video. It has built-in transparency, but this can also be altered with the transparency slider in the color picker.

Border-radius follows this, and here you can independently control the radius of each corner of the video. For instance, I can give this video slightly rounded edges by adding a value of 10 pixels all around. You can also apply a box shadow to your video, and if you do, you get four more options to control that box shadow in the form of Box Shadow Position, Box Shadow Blur Radius, Box Shadow Spread Radius, and Box Shadow Color.

The last two options for this element are Alignment, which can be text flow left, right, or center. I usually make this center for better responsive design, but that will, of course, depend on your layer. Finally, there is a Margin option for adding margins at the top and bottom of this element.

This new element is a real boon to anyone wanting to use self-hosted videos on their website, and it offers you all the customization options you might need. Okay, this concludes our video on how to use the Video element. Make sure you subscribe to our YouTube channel to keep up with all the latest videos, and if you have any questions or need assistance, please create a support ticket, and our team will gladly assist you.

As always, we want to thank you for choosing Avada!

Don’t miss this ...

We don’t spam! Read our privacy policy for more info.

Table of Content

Recent Posts

Don’t miss this

We don’t spam! Read our privacy policy for more info.