Youtube thumbline image instead video Iframe
Hello folks, Today I want to share one of the amazing concept how can we use Youtube thumbline image instead video Iframe!! Because sometime youtube Iframe will take more time to get load though our whole page has been loaded at client side and this will also make our website slow for our customers, so instead of direct use Youtube Iframe we should use Youtube thumbline. I have added simple code snippet as below please refer it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube Embeds - Responsive and Light</title>
<style>
.youtube-thumb {
position: relative;
padding-bottom: 56.23%;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.youtube-thumb iframe,
.youtube-thumb object,
.youtube-thumb embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.youtube-thumb 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-thumb img:hover {
-webkit-filter: brightness(75%);
}
.youtube-thumb .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("https://i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}
</style>
</head>
<body style="max-width: 500px; margin: 40px auto; background: #f7f7f7">
<h3>Responsive & Light YouTube Embed (15 kb)</h3>
<div class="youtube-thumb" data-id="Wd2B8OAotU8"></div>
</body>
<script>
document.addEventListener("DOMContentLoaded",
function () {
var div, i,
v = document.getElementsByClassName("youtube-thumb");
for (i = 0; i < v.length; i++) {
div = document.createElement("div");
div.setAttribute("data-id", v[i].dataset.id);
div.innerHTML = TechnothirstyThumb(v[i].dataset.id);
div.onclick = TechnothirstyIframe;
v[i].appendChild(div);
}
});
function TechnothirstyThumb(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 TechnothirstyIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
</script>
</html>
Here as shown in code snippet we have fetched thumbline of Youtube dynamically and display that image instead loading whole Iframe at a beginning. As soon as user will click on that image IFrame will be loaded explicitly on that page. So user will get faster page load and get better user experience.
Output of our code snippet:
