Embedding youtube videos on blog can be a way to enrich the content and also a good way to promote our youtube channel. But if you just pin it, it can have a bad effect on your blog's performance.
In general, when blog owner want to embed videos from YouTube into their blog, they directly embed code copied from YouTube into the blog posts without giving any treatment.
As a result, when the blog is loaded, then the internal frame (iframe) of YouTube will also be loaded.
Blog will need more time until the page is fully loaded. If you don't know what an iframe is, in short, html. So our blog page in html form will load another html in the body.
So the loading will be longer. For the size needed to load the youtube iframe it can reach 2 MB or even more.
To overcome this we can be fooled by using lazy javascript. The way it works is that the script will initially only download thumbnail images.
In the center area of thumbnail will be provided a play button which when clicked will trigger the video loading process.
Of course, this method is very effective so that the embedded video does not affect blog performances.
For the lazy load youtube itself there are several scripts, but the script made by wingkwong is my choice because the code line is quite simple and easy to modify.
In this script I reduce a few lines of code, namely the youtube image caller.
In my opinion, YouTube thumbnail images can be added manually so that the "alt" attribute can make the content more SEO friendly.
But if you don't care and are too lazy to click again, just use the original script.
To install this javascript code can be directly copied above the template body code and to complete and improve the appearance, a few lines of CSS can be installed in the blog skin area.
How To Install
Please copy the following code and paste it directly above </body>
<script> //<![CDATA[ !function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}(); //]]> </script>
Then copy the following code then paste it directly above the code </b:skin>
/*! llyv.css v0.1.0 */ .llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer} .llyv{background-color:#000;margin-bottom:20px;position:relative;padding-top:56.25%;overflow:hidden} .llyv img{width:100%;top:-16.82%} .llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px} .llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff} .llyv .llyv-play-btn:hover{background-color:red} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute} .llyv iframe{height:100%;width:100%;top:0;left:0}.llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
Next copy the code below then paste it anywhere in the post. Don't forget to enter html mode. Replace the video id with the video id that you want to embed.
Example video id like the one I gave in red, https://www.youtube.com/watch?v=B961ypoo0I4
<div class="llyv" data-id="id-video"> <img src="https://img.youtube.com/vi/id-video/hqdefault.jpg"/></div>
After:
<div class="llyv" data-id="B961ypoo0I4"> <img src="https://img.youtube.com/vi/B961ypoo0I4/hqdefault.jpg"/></div>
If you are super lazy you can use the original script. Later, the markup created in the post is just one line. Installation method is same as above.
Javascript
<script> //<![CDATA[ /*! llyv.js v0.1.0 */ !function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i);var l=document.createElement("img");l.src="https://img.youtube.com/vi/"+t[e].dataset.id+"/hqdefault.jpg",t[e].appendChild(l),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}(); //]]> </script>
CSS
/* * llyv.css * Optimizing the performance while loading multiple YouTube videos on the same page * @license MIT * @version 0.1.0 * @author Wong, Wing Kam - @wingkwong * @updated 2018-07-11 * @link https://github.com/wingkwong/lazy-load-youtube-videos */ .llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer} .llyv{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden} .llyv img{width:100%;top:-16.82%} .llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px} .llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff} .llyv .llyv-play-btn:hover{background-color:red} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute} .llyv iframe{height:100%;width:100%;top:0;left:0} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
Markup in posts
<div class="llyv" data-id="id-video">
May be useful...