YouTube Element

Last Update: February 20, 2023

Adding a YouTube video to your website has never been easier thanks to the Avada Builder YouTube Element. Just add the YouTube video ID, and away you go. It’s even got built in responsive features, so you don’t have to worry about the size of your videos! Read below to discover how to make the most of the YouTube Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The YouTube Element

Adding a YouTube video to your content couldn’t be easier. To start, add the element into your desired column.

Now you have the options window open. The first and most important step is to place the YouTube video ID into the Video ID field. This is the the end section of the url; for example the Video ID for https://www.youtube.com/watch?v=UDyNsnB_COA is UDyNsnB_COA.

In the Alignment field, you can choose the alignment of the video in the column you are placing it in. Set the dimensions of the video. This is in pixels, but you just enter a number. You can enter just the width or the height, and the other value will be auto calculated, assuming a 16:9 aspect ratio. If you have a non 16:9 aspect ratio video, enter both width and height.

NB. YouTube videos are displayed in a 16:9 aspect ratio, so if the video you choose or the dimensions you enter is not in that ratio, black bars are added to the side, or top and bottom.

There are a couple more options you can select. One is Autoplay, which by default is set to No, as it’s generally not considered good Netiquette for videos to autoplay, and there is an option for additional API parameters. The most common of these is &rel=0. For a full list of YouTube parameters, please see this document. And with Avada 7.4, we introduced a Video Facade option, to help with page speed. Once you have finished with the options, simply click save and the video will be inserted into your page.

Element Options

General

HeadingDescription
Video ID or UrlFor example the Video ID for https://www.youtube.com/watch?v=CbOQqvQDrVQ is CbOQqvQDrVQ.
AlignmentSelect the video's alignment.
DimensionsIn pixels but only enter a number, ex: 600.
Autoplay VideoSet to yes to make video autoplaying. Muted video required for autoplay video.
Mute videoSet to yes to make video muted.
Additional API ParameterUse an additional API parameter, for example, &rel=0 to only display related videos from the same channel.
Title AttributeSet the title attribute for the iframe embed of your video. Leave empty to use default value of "YouTube video player #".
Video FacadeEnable video facade in order to load video player only when video is played. Default currently set to On.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Extras

HeadingDescription
Structured DataEnable video structured data for better SEO.
Upload DateSelect video upload date.
Video DurationInsert the video duration.
Video TitleInsert the video title.
Video DescriptionInsert the video description.

In this article