YouTube Element
The YouTube Element embeds a video hosted on YouTube. You paste the video address or its ID, and the element shows the YouTube player in a responsive frame that keeps the video’s proportions on every screen size. The video stays on YouTube, so it does not use storage or bandwidth on your own server.
You can play only part of the video, start it automatically and muted, loop it, hide the player controls, load the player only when the visitor clicks play, and add structured data so search engines understand what the video is about.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The YouTube Element
Add the YouTube Element to any column and paste the video address or ID into Video ID or Url. Set the Alignment and the Dimensions as plain numbers; they define the aspect ratio of the player, which then scales with the column.
Start Time and End Time (in seconds) limit the part that plays. Autoplay Video, Mute Video, Loop Video and Player Controls set the playback, and Additional API Parameter passes extra YouTube player settings, for example &rel=0. Give the embed a meaningful Title Attribute; screen readers announce it.
Video Facade shows a preview image with a play button and loads the real player only when it is clicked; on Default it follows the Enable Video Facade setting in the Performance section of Global Options. With the facade on, Thumbnail Size picks the preview image and Load Via YouTube No Cookie loads the player from youtube-nocookie.com. On the Extras tab, Structured Data adds the video’s title, description, upload date and duration for search engines.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Video ID or Url | For example the Video ID for https://www.youtube.com/watch?v=CbOQqvQDrVQ is CbOQqvQDrVQ. |
| Alignment | Select the video’s alignment. |
| Dimensions | In pixels but only enter a number, for example 600. |
| Start Time | Specify a start time for the video (in seconds). |
| End Time | Specify an end time for the video (in seconds). |
| Autoplay Video | Set to yes to make video autoplaying. Muted video required for autoplay video. |
| Mute Video | Set to yes to make video muted. |
| Loop Video | Set to yes to let the video loop. |
| Player Controls | Set to yes to display the player controls. |
| Additional API Parameter | Use an additional API parameter, for example, &rel=0 to only display related videos from the same channel. |
| Title Attribute | Set the title attribute for the iframe embed of your video. Leave empty to use default value of “YouTube video player #”. |
| Video Facade | Enable video facade in order to load video player only when video is played. |
| Thumbnail Size | Select the video’s preview thumbnail size. The sizes are YouTube standard, and not all sizes are available for every video. Leave empty for auto selection depending on video dimensions. |
| Load Via YouTube No Cookie | Enable to load the video as trackingless embed via youtube-nocookie.com. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Structured Data | Enable video structured data for better SEO. |
| Upload Date & Time | Select video upload date and time. |
| Upload Timezone | Select video upload time timezone. |
| Video Duration | Insert the video duration. |
| Video Title | Insert the video title. |
| Video Description | Insert the video description. |
Tips
- Autoplay only works when the video is muted. Set Mute Video to Yes whenever Autoplay Video is on.
- Turn on Video Facade for every video that is not needed right away. The YouTube player is heavy, and the facade loads it only when a visitor wants to watch.
- Not every video has every thumbnail size. If a preview image looks blank, choose a smaller Thumbnail Size or leave it on Auto.
- Structured data only helps when the title, description, upload date and duration match the real video. Fill in all of them or leave Structured Data off.
- If a setting such as
start=ormute=1is already typed into Additional API Parameter, the element does not add its own value for it. Set each thing in one place only.