Placing Videos in Avada

Last Update: April 10, 2024

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

Generally, YouTube and Vimeo videos are most commonly used, as these are not served directly from your server and so don’t affect your bandwidth, but self-hosted videos, despite their 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 help file looks at how videos can be used in Avada.

Videos In Sliders

All major sliders that ship with Avada support videos, including Avada Slider, Slider Revolution, and Layer Slider. Of course, each slider has 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.

Avada Slider – Avada Slider supports a full range of video backgrounds. Please see the Slide Options section of the How To Use Avada Slider doc for more information on how to add videos to your Avada 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 three 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 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 add 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 Avada Shortcode generator, when editing the Modal Element.

Some Examples

Click To Open Video!

Self-Hosted Video in a Lightbox Element

Self-Hosted Video in a Lightbox, being triggered from a Column

Click Me To Open Video!

Self-Hosted Video in a Lightbox, being triggered by a Button

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

For privacy reasons YouTube needs your permission to be loaded.

Click Me To Open Video in Modal!

YouTube Video in a YouTube Element

Self-Hosted Video opening in a Modal