How To Use The Video Element – Avada V7

Published On: August 14th, 2020Categories: Avada, Video Training668 words3.4 min read

Avada Website BuilderIn this series of videos, we are looking at how to use the Fusion Builder Elements. This video looks at how to use the Video Element in Fusion Builder.

Purchase your next copy of Avada –

Avada Documentation –

Useful Links: Avada Layouts –

Avada Quick Start Guide –

Avada Builder Documentation –

Need support? –

How To Use The Video Element – Avada V7 – Transcript

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 about a 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 percentage if you leave it empty the full video which will be used.

You can show or hide the video controls with the next options.

And with video preloading you can control if and how 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.

Following these 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 know.

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 in 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 colour, which as the name suggests, over laser colour over the video.

That has built in transparency, but this can also be altered with the transparency slider in the colour 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 for more options to control that bug shadow in the form of box shadow, position box, shadow blur, radius box, shadow spread radius and box shadow colour.

The last two options for this element are alignment, which can be text flow, left, right or centre. I usually make this Center for better responsive design, but that will of course depend on your layer.

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

OK, this concludes our video on how to use the video element.

Make sure you subscribe to a YouTube channel to keep up with all the latest videos.

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.