GeneratePress & Elementor: How to embed lightweight YouTube videos for faster page speed


In this video, I will show you how to embed lightweight YouTube videos for faster page speed

-First, log into your WordPress admin area
-Next, hover over Appearances and click on the GP Hooks menu
-Scroll down to “Before footer content” area or simply use the drop-down on the right
-Copy and paste the code:

 

Script part

The only change I did to the original code is the thumbnail size to maximum resolution. Let’s save this and go to the Customiser. Here, we will need the Additional CSS option. Once again copy the code from the description of this video and modify it to your style if you wish to!

/* 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/maxresdefault.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);
}

 

CSS part:

.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;
}

For the final step, let’s test if everything works correctly. Please note, this final step is the only thing you will need to do in the future for every new video embedding.

On the page you need this video embed, add an HTML widget and copy the final piece of code. There is a VIDEO_ID part that you will need to swap to the youtube videos ID you wish to embed.

HTML part

<div class=”youtube-player” data-id=”5ITXhb_Q4l8″></div>

One very important thing is, you can not use Elementor Canvas as page template as it will not let the video display. With GeneratePress Premium this is not an issue just disable everything if you need a clean canvas to work with ?

 

Resources used:

Did I do something wrong?

Are you missing a design or didn’t had the chance to take a good look on other templates?