Using Videos in Avada

05/08/2020

As Internet speeds increase, videos are increasingly common on websites, and they can make a site dynamic and more interesting than a static page.  With Avada, we offer a wide range of options for adding videos into your website, including YouTube, Vimeo and self-hosted videos.

Generally, YouTube and Vimeo videos are more commonly used, as these are not served directly from your server, and so don’t affect your bandwidth, but self-hosted videos, despite thier potential for affecting page load speed and server bandwidth, can also be used in clever ways in Avada, and should not be ruled out.

This article looks at the various ways videos can be used in Avada. Read on!

Where Can I Use Videos In Avada?

Videos In Sliders

All major sliders that ship with Avada support videos, including Fusion Slider, Slider Revolution & Layer Slider.

Each slider will, of course, have a different process for adding videos, but all three support YouTube, Vimeo, and self-hosted videos. You can use any video type in a  slider, but this is generally where self-hosted videos come into their own. The most appropriate videos for sliders are often small background videos that are muted, autoplay upon load, and with no controls. YouTube and Vimeo videos often have overlays and ads etc, so it’s here a small self hosted video fits the bill.

  • Fusion Slider – Fusion Slider is Theme-Fusion’s own slider, and supports a full range of video backgrounds. Please see the Fusion Slider Background Type Options for more information on how to add videos to your Fusion Slider slides.

  • SliderRevolution – SliderRevolution supports all three types of videos for slide backgrounds. See our Slider Revolution Documentation for more information. There are also a wealth of tutorials on the Internet if you need help to create your SliderRevolution sliders, and a good place to start is the ThemePunch Support Center.

  • LayerSlider – LayerSlider uses video layers which also support YouTube, Vimeo and HTML 5 video. Please see our Layer Slider documentation, or the Kreatura LayerSlider Documentation for further information.

Videos As Container Backgrounds

You can also use videos as Container backgrounds, through the Container > BG > Video tab. Again, these are best as background videos, rather than feature videos, as the container dimensions may not fit the video size and content will likely be placed above the video in the container and its column/s.

For more details on the Container Backgorund tabs, including the video tab, please see the How To Use Container & Column Background Options doc and video.

Videos can also be opened in a Lightbox, in a variety of ways. You can of course use the Lightbox Element, which we will cover below, in the Elements section, but you can also trigger a video in a Lightbox from a Column.

Editing any Column, you will find the Link URL field and the Link Target field, directly below this. Simply add your video URL in the Link URL field, and set the Link Target Field to Lightbox. The whole column then becomes a link, and clicking on it briings the video up in a Lightbox, ready to play.

Useful Elements for Videos

There are 3 Video Elements in Avada, as well as a number of elements that can be used to trigger or display videos.

  • Video Element – this is for self-hosted videos. This is new in Avada 6.1, and offers a range of options for both video format and layout options.

  • Vimeo Element – easily add Vimeo videos to your content. There are dimension and alignment options, as well as autoplay and additional API paremeter options.

  • YouTube Element – easily add YouTube videos to your content. There are dimension and alignment options, as well as autoplay and additional API paremeter options.

  • Lightbox Element – The Lightbox Element has a Video Content type, and when this is selected, you can add any video URL here, as well as control a thumbnail, title and description. This is an easy and stylish way to play a video in a  Lightbox.

  • Button Element – You can also trigger a video in a Lightbox from the Button Element. Simply ass the Video URL in the Button URL field, and select Lightbox as the Button Target.

  • Modal Element – You can add a video to a Modal dialog as its content, by adding another video based element, like the YouTube Element, into the Contents of Modal field, through the Fusion Shortcode generaotr, when editing the Modal Element.

Some Examples

Click To Open Video!

Click Me To Open Video!

Video in a Lightbox Element

Video in a Lightbox, being triggered from a Column

Video in a Lightbox, being triggered by a Button

Click Me To Open Video in Modal!

Self-hosted Video in a Video Element with 5px border radius.

YouTube Video in a YouTube Element

Self-Hosted Video opening in a Modal