Tutorial How to Install Lazy Load Image And Responsive Youtube Embed Video

| | Tutorial Blogspot |

Lazy Load Image And Responsive Youtube Embed Video With Javascript LazySize.js | Tutorial blog today we will make pure javascript to automatically add class = "lazyload" and change the src attribute into data-src attribute of the image and iframe Youtube and automatically convert Youtube video iframe be responsive.

With pure javascript, then do not need jquery library so that blogs that do not use the library jquey can use lazy load with lazysize.js because lazysize.js itself does not require jquery library.

Lazy Load Image And Responsive Youtube Embed Video With Javascript LazySize.js

Who wants to try it please copy the code below and save the above code </body>. 
<script async='async' src='https://cdn.rawgit.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js' type='text/javascript'></script>
for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].className+=" lazyload",imgEl[i].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));

function wrap(top, selector, bottom) {
var videos = document.querySelectorAll(selector);
    for (var i = 0; i < videos.length; i++) {
        if (videos[i].getAttribute('src')) {
            videos[i].setAttribute('data-src', videos[i].getAttribute('src'));
        videos[i].setAttribute("style", "position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;");
        var modified = top + videos[i].outerHTML + bottom;
        videos[i].outerHTML = modified;
wrap("<div style='position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%'>", "iframe[src*='youtube.com']", "</div>");

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box