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);
}
...and a few affiliate links (well you never know)
