Aside from images and text, videos are a great way to showcase content on your website. Avda offers many ways for videos to be loaded into your site, including YouTube, Vimeo and self-hosted videos.
Self-hosted videos require a few steps to create and can use a few file formats per video. This step by step article will cover the various file formats of self hosted videos, how to make the required and optional file formats, areas of Avada that can use the videos, and how to use the videos in those areas.
IMPORTANT NOTE – The ability to set a video as a background of a full-width container is only available in Avada version 3.7 or higher.
A Self Hosted Video Consists of 4 File Formats
.MP4 – A required file format for uploading self-hosted videos. This file works in all major browsers.
.WEBM – This format is growing in popularity, but is an optional file format with self-hosted videos.
.OGV – Another optional file format for self-hosted videos.
Video Preview Image – The image that will be seen in place of your video on older browsers or mobile devices.
The Only Required Format is MP4
As mentioned above, mp4 is the only required video format for self-hosted videos. WebM and .ogv are optional formats.
The steps below assume that you already have a video to use. Videos come in many different formats, so the idea is that you need to convert your current video format to MP4 and WEBM files, which can then be uploaded and used on your website.
IMPORTANT NOTE – If you have an MP4 video that is not showing/playing, then chances are the video isn’t encoded properly. In this event, try to use Handbrake to re-encode the video.
How To Create A MP4 File
Step 1 – After creating your video, make sure to save it in .MP4 format. The video should also be in 16:9 Aspect Ratio.
Step 2 – If you are unable to save your video in .MP4 format, you must convert it to .MP4 format via a 3rd party software, like Handbrake. Please see the links below for information on how to do this.
View Handbrake documentation.
How To Create A WEBM File
Step 1 – Once you have a video in .MP4 format, if you wish, you can also convert it to .WEBM format. You can do this with Media.io.
Step 2 – If you choose to use Media.io, you can simply upload your .MP4 video and it will automatically convert it to .WEBM format.
IMPORTANT NOTE – Self hosted videos can be very large in size, which is not good for a website. Conversion tools like Handbrake and Firefogg will drastically reduce file size. Handbrake and Firefogg are 3rd party applications and are not affiliated with ThemeFusion.
A properly encoded and compressed video shouldn’t be more than 4-8 MB for a 30-60 seconds clip. Avoid adding larger video files > 10MB as they contribute to overall page size and will be a cause of negative user experience.
Areas You Can Use Self-Hosted Videos
Video Element – New for Avada 6.1, this Element is specifically designed for you to add self-hosted videos into your content.
Containers – Using the Fusion Builder Container Element, you can set a self-hosted video as the background.
Fusion Slider – Using the Fusion Slider, you can insert self-hosted videos into your slides.
Layer Slider – Using the Layer Slider, you can insert self-hosted videos into your slides.
Revolution Slider – Using the Revolution Slider, you can insert self-hosted videos into your slides.
Anywhere Lightbox is used – Lightboxes can show self-hosted videos, and they can be triggered from the Column, Button and Lightbox Elements, and in the Portfolio Page Video URL for Lightbox option. For more information on using videos in Lightbox, please see How To Show Videos In A Lightbox.
How To Upload Your Video File(s)
Once you have your video as an .MP4 file, you’re now ready to upload it.
Step 1 – Choose the area of the site you want to use self-hosted videos. Each area described above has slightly different upload methods, but all accept .mp4 files.
Step 2 – In your chosen area, simply upload the correct file format to the correct field. For example, upload the .MP4 file format to the .MP4 Upload field. There will be a field for the required file format, and in some cases, fields for the optional videos as well.
Step 3 – If there is just a simple text field with no video uploader button, like in the Container Element, you will need to upload the file to the Media Section and then copy and paste the URL.
Step 4 – If your media files are too big to upload through the Media Manager, you will need to upload them to your server via FTP.