YouTube is 1 of the most dominating online Video broadcasting website which has about flexible options to move embedded inward a webpage. Furthermore, in that place are no 2 opinions that YouTube enriches a weblog amongst awesomeness. However, what would move on if nosotros embed xx dissimilar kinds of Videos into 1 Webpage? It volition sure as shooting cut back the page speed as well as would increment the issue of HTTP requests. Since, every video is hosted inward an iframe. Therefore, it takes a land to load. For 1 video, it would non accept besides long, but for xx it would sure as shooting eat a hell lot of disk infinite addition it volition also decrease the page speed. For the reason, MBL Developers stimulate got developed a robust jQuery plugin for Lazy loading YouTube videos.
Introduction: How To Accelerate Blog Speed & Load Time? - Series
Tutorial #1: How To Analyze Your Site Speed With Online Tools?
Tutorial #3: How To Add jQuery Lazy Loading YouTube Videos inward Blogger?
Tutorial #4: How To Avoid Useless Widgets That Increases Blog Load Time?
What is Lazy Loading YouTube Video?
When nosotros stimulate got lots of videos embedded into a unmarried webpage it quite obvious that it would increment the charge time. However, what would move on if nosotros stimulate got a spider web page containing a YouTube Video which volition non move played until a mortal clicks on it. This is a straightforward tip that yous may stimulate got seen on Facebook Videos. In reality, the video is hidden behind an icon as well as solely appears whenever a visitor clicks on it. We stimulate got added a lazy Loading YouTube Video below thence experience complimentary to click on the below icon as well as run across the magic.
How to Add Lazy Loading YouTube Video inward Blogger?
Nowadays The Embed code of YouTube looks a like to the following. It is simply an artless iframe that helps inward embedding.
<iframe width="420" height="315" src="https://www.youtube.com/watch?v=aoJ29q_ClGk?rel=0" frameborder="0" allowfullscreen></iframe>
The commencement affair nosotros necessitate to create is to add together CSS coding to blogger template. Go to Blogger >> Template >> Edit HTML >> Proceed. Now search for Skin tag as well as simply higher upward it glue the next chunk of coding.
/********************************/////////////////////////////////////////////////////////// //// // Designer: Syed Faizan Ali //// All rights are Strictly Reserved //// ///////////////////////////////////////////////////////////********************************/a.mbl-youtube-lazy-loading {vertical-align:top;background:#555;width:560px; height:315px;background-size:cover;text-decoration:none;color:#DDD;text-align:left;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;display:inline-block;}a.mbl-youtube-lazy-loading:hover {text-decoration:none;color:#FFF;}.mbl-youtube-lazy-loading-div {border:2px corporation #000;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBgbujEzUQEX2Dptrn8aVSSeyEUr71U0LN8d1EDu6eBLuA5nf2b_dHy2DjdweN50Pgo8imSS6x3g216ssCJq3TBMfukL1NxNq7b4ApTmF_ShS_-o39Qm0dRZ3sNWQHIjlCwOQRs3HR-QY/s800/youtube-play-button.png) oculus midpoint no-repeat;position:absolute;}.mbl-youtube-lazy-loading-div:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ1SxVMLijPlwW_HQcOCgw3onBwQkPZ6GF51DH0bv4a4en2CS_cTD_cUQya3bXOZF9_6tsfg8uOLmEuxykV8Z0veML-L7e7Yx50yp8b1xuWT8AFutdvC1fCjuo4H_2Sfb5TPrqNGJRBlk/s800/youtube-play-button-hover.png) oculus midpoint no-repeat;}.mbl-youtube-lazy-loading-info {font-size: 110%;font-family:lora;padding: 2px 6px;background: rgb(0, 0, 0);background: rgba(0, 0, 0, 0.5);}#mycontent {text-align:center;position:relative;}
After pasting the CSS coding deed ahead as well as search for </head> tag as well as simply higher upward it glue the next JavaScript coding. Don’t worry it volition non disturb the charge fourth dimension of your website. Once everything is done Save the template.
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
Now allow us speed upward our Page Speed. Once the Lazy loading script is installed its fourth dimension to utilize it. Go to Blogger >> Add New Post >> Select the Edit HTML Tab as well as simply glue the next coding. Note: This technique also plant on WordPress as well as other platforms too.
<div style="text-align:center;"><a class="mbl-youtube-lazy-loading" href="https://www.youtube.com/watch?v=aoJ29q_ClGk" style="width: 540px;height:315px;" title="How To Add jQuery Lazy Loading YouTube Videos inward Blogger"><b>An Introduction To Blogger Post Editor</b></a></div><div id="mycontent">Powered By <a href="http://www.mybloggerlab.com">http://www.mybloggerlab.com</a></div><script src='https://mybloggerlab.googlecode.com/files/lazyYT.js' type='text/javascript'></script>
From the Above Coding supplant the next according to your needs.
- https://www.youtube.com/watch?v=aoJ29q_ClGk with your YouTube Video URL.
- 540px to increment the width.
- 315px to increment the height.
All Done: Now afterwards customizing the higher upward coding, hitting the Publish button. That is all. This technique is chip novel thence if anyone faces whatever põrnikas then, create non hesitate to instruct out your comment below.
From The Editor's Desk:
It almost took to a greater extent than than 2 months to let on about other Article of this series. The argue behind that was the difficult function our Team has done to fix this JavaScript. However, shortly nosotros volition complete this serious on a high. What are your thoughts nearly this Lazy Loading jQuery Script? Feel complimentary to portion your views. Take aid till then, Peace, Blessings as well as Happy loading.
No comments:
Post a Comment