I want to use code to make my site load YouTube Embeds faster. The code displays the thumbnail of a YouTube video and only when you click the thumbnail the video player will load. This is handy because YouTube embeds are big and slow your page down. And this way you only load the video player when you are really going to watch the video.
I want to use the code to embed YouTube playlists instead of single videos. But the problem i have, is that i cannot find a way to automatically display the last thumbnail of the playlist. So the thumbnail of the video that was last added to the playlist. I did manage to display the playlist when you click the (default) thumbnail so that is no problem anymore.
Does anybody have any suggestions about how to display the latest thumbnail?
I would be very grateful.
This is the code: https://codepen.io/DeanAmsterdam/pen/pozWxjW -I changed HTML line 1, from a youtube video ID to a playlist ID. -I changed JS Line 23, from "https://www.youtube.com/embed/ID?autoplay=1"; TO "https://www.youtube.com/embed/videoseries?list=ID";
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/videoseries?list=ID";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
i also found a second piece of code that does the same thing, i made changes on HTML line 1 and JS line 21. The changes are the same as on the other code: https://codepen.io/DeanAmsterdam/pen/gOYoLLY
I am only just a simple Wordpress user so please forgive me if i made any mistakes in explaining.
Thank You.
