Home
Script
YouTube

Stylish Lazy YouTube Script for Blogger

Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Stylish Lazy YouTube Script on blogger. This is the Right Place to you. Since You can get this Script for free.

Today, in this article, I will Discuss with you about How to Add Stylish Lazy YouTube in Your Blog Post.

What is Lazy YouTube

The default YouTube iframe that we implanted in our site dials back the stacking speed by stacking a great deal of assets in the front end. An implanted iframe of YouTube recordings can take around 500-700 KB contributing around 50-60 percent of the all out page size. Thus, how hard you advance your pictures, CSS, and javascript stacking, goes about as a bottleneck in the speed execution.

Assuming you install a youtube video in the customary technique, it will stack the necessary assets toward the start of the page load whether or not the client plays the video. Rather than stacking the video initially we can defer a heap of Youtube iframes by executing the lazyload. Thus, when a client looks to the video, the video will begin stacking.

It will save the server data transmission and burden the page quicker. It additionally won't impede the primary string errand and burden just when it is required. Be that as it may, rather than simply applying the Lazyload, we can add a little placeholder which is fundamentally a picture with a play button and it will open the installed video when a client taps on it.

Thusly, the program will stack just the picture and burden the video just when a client taps on the play button. Presently you have figured out how it functions. We should perceive how you can carry out apathetic stacking of iframes in your Blogger site.

How to Add

So, to add Stylish Lazy YouTube on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily add this feature in your blogger website.

Step 1

  • You will go to your - Blogger Dashboard
  • Go to Theme
  • Go to - Edit HTML
  • Search - </head> or &lt;/head&gt;
  • Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;

You must back up your theme before go to Edit HTML

<style>
.YT-Player{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;background:#000;border-radius:5px;margin:20px 0 auto 0;border:1.7px solid #fff;box-shadow:0 0 10px #000;border-radius:5px;margin:20px 0 auto 0} 
.YT-Player iframe{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--transparent-bg) url("data:image/svg+xml,<svg viewBox='0 0 50 50' x='0px' xmlns='http://www.w3.org/2000/svg' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z' fill='rgba(0,0,255,1)'><animateTransform attributeName='transform' attributeType='xml' dur='0.7s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'/></path></svg>") center / 26px no-repeat}
.YT-Player img{position:absolute;top:-15.9%;left:0;width:100%;height:auto;border-radius:5px;filter:brightness(65%)}
.YT-Player .Play:before{position:absolute;top:42%;left:42%;content:'\e037';font-family:Material Icons;font-size:26pt;color:#fff;background:#ff0000;padding:7px 12px;border-radius:10px}
</style>

Step 2

  • After Paste CSS Code
  • Search - </body> or &lt;/body&gt;
  • Copy this Javascript below and Paste on top of - </body> or &lt;/body&gt;
  • Save theme
<script>
function labnolIframe(e){var t=document.createElement("iframe");t.setAttribute("src","https://www.youtube.com/embed/"+e.dataset.id+"?autoplay=1&rel=0"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen",""),t.setAttribute("allow","accelerometer; autoplay;encrypted-media;gyroscope;picture-in-picture"),e.parentNode.replaceChild(t,e)}function initYouTubeVideos(){for(var e=document.querySelectorAll(".YT-Player"),t=0;t<e.length;t++){var a=e[t].dataset.id,r=document.createElement("div");r.setAttribute("data-id",a);var i=document.createElement("img");i.src="https://i.ytimg.com/vi/ID/hqdefault.jpg".replace("ID",a),r.appendChild(i);var n=document.createElement("div");n.setAttribute("class","Play"),r.appendChild(n),r.onclick=function(){labnolIframe(this)},e[t].appendChild(r)}}document.addEventListener("DOMContentLoaded",initYouTubeVideos);
</script>

Step 3

  • After Save Theme
  • Copy this HTML Code and Paste anywhere you like
  • Replace xElgI3JOoR4 and Paste Your Video Id
  • Done.
<div class='YT-Player' data-id='xElgI3JOoR4'></div>

How to Get YouTube Video Id

  • Choose Youtube Video
  • Copy Share Link and Replace the xElgI3JOoR4 Code in the HTML Code given by me
  • Remove https://youtu.be/
  • The last 11 digits are Youtube video id

If you have any problem to extract the ID from url,

You can use My YouTube Video ID Extractor Tool Free.

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.

Post a Comment

  • Aᴀ
  • A+
  • A-