How to Create Self-Hosted Videos

Last Update: February 26, 2024

Aside from images and text, videos are a great way to showcase content on your website. Avada 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.

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.

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.

Areas You Can Use Self-Hosted Videos

  • Video Element – This Element is specifically designed for you to add self-hosted videos into your content.

  • Containers – Using the Avada Builder Container Element, you can set a self-hosted video as the background.

  • Avada Slider – Using the Avada 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 update your server settings, or upload them to your server via FTP.

Adding Self-Hosted Videos

In this article