Update: Doug Belchamber produced a Beaver Builder module that can do all of this and more. He also produced a video to go with it.

https://wpdevelopers.co.uk/optimised-youtube-vimeo-embeds-for-beaver-builder/

You can try the plugin on my live demo site for free plugins.

Slow Loading YouTube Videos

Faster Loading YouTube Videos

CSS using Font Awesome Icon for Play button

Work with the Beaver Builder theme, GeneratePress and Dynamik Website Builder (if Font Awesome settings are turned on).

.youtube-player
{
 position: relative;
 padding-bottom: 56.23%;
 height: 0;
 overflow: hidden;
 max-width: 100%;
 background: #000;
 margin: 5px;
}
.youtube-player IFRAME
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 100;
 background: transparent;
}
.youtube-player IMG
{
 bottom: 0;
 display: flex;
 left: 0;
 margin: auto;
 max-width: 100%;
 width: 100%;
 position: absolute;
 right: 0;
 top: 0;
 border: none;
 height: auto;
 cursor: pointer;
 -webkit-transition: .4s all;
 -moz-transition: .4s all;
 transition: 0.4s all;
}
.youtube-player IMG:hover
{
 -webkit-filter: brightness(75%);
}
.youtube-player .play
{
 position: absolute;
 cursor: pointer;
 z-index: 1;
 left: 50%;
 top: 50%;
 margin-left: -20px;
 margin-top: -34px;
}
.youtube-player .play:after
{
 font-family: FontAwesome;
 content: "\f16a";
 font-size: 43px;
 color: #444444;
}
.youtube-player .play:before
{
 content: "\f0c8";
 color: #FFFFFF;
 position: absolute;
 margin-top: 21px;
 font-family: FontAwesome;
 margin-left: 12px;
 z-index: -1;
}
.youtube-player:hover .play:after
{
 color: #CC181E;
}

CSS using shared image for Play button

Probably best to replace ("//i.imgur.com/TxzC70f.png") with the url of an image uploaded to your WordPress Media library.

.youtube-player {
 position: relative;
 padding-bottom: 56.23%;
 /* Use 75% for 4:3 videos */
 height: 0;
 overflow: hidden;
 max-width: 100%;
 background: #000;
 margin: 5px;
 }

.youtube-player iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 100;
 background: transparent;
 }

.youtube-player img {
 bottom: 0;
 display: block;
 left: 0;
 margin: auto;
 max-width: 100%;
 width: 100%;
 position: absolute;
 right: 0;
 top: 0;
 border: none;
 height: auto;
 cursor: pointer;
 -webkit-transition: .4s all;
 -moz-transition: .4s all;
 transition: .4s all;
 }

.youtube-player img:hover {
 -webkit-filter: brightness(75%);
 }

.youtube-player .play {
 height: 72px;
 width: 72px;
 left: 50%;
 top: 50%;
 margin-left: -36px;
 margin-top: -36px;
 position: absolute;
 background: url("//i.imgur.com/TxzC70f.png") no-repeat;
 cursor: pointer;
 }

JavaScript.

This is added via Page Builder > Tools > CSS/Javascript > Javascript.


 

 /* Light YouTube Embeds by @labnol */

/* Web: http://labnol.org/?p=27941 */

 

document.addEventListener("DOMContentLoaded",

function() {

var div, n,

v = document.getElementsByClassName("youtube-player");

for (n = 0; n < v.length; n++) {

div = document.createElement("div");

div.setAttribute("data-id", v[n].dataset.id);

div.innerHTML = labnolThumb(v[n].dataset.id);

div.onclick = labnolIframe;

v[n].appendChild(div);

}

});

 

function labnolThumb(id) {

var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',

play = '<div class="play"></div>';

return thumb.replace("ID", id) + play;

}

 

function labnolIframe() {

var iframe = document.createElement("iframe");

var embed = "https://www.youtube.com/embed/ID?autoplay=1";

iframe.setAttribute("src", embed.replace("ID", this.dataset.id));

iframe.setAttribute("frameborder", "0");

iframe.setAttribute("allowfullscreen", "1");

this.parentNode.replaceChild(iframe, this);

}

Video and HTML Pop-ups from Buttons (new in BB 1.9)

...and a few affiliate links (well you never know)

Beaver Tunnels - Release The Beaver
Best Beaver Builder Add-ons
Ultimate Addons for Beaver Builder
Get Beaver Builder Now!