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

Setelah kemarin kita membuat lazy load untuk image dan video Youtube dengan lazysize.js dan menggunakan jquery untuk otomatis menambahkan class="lazyload" dan merubah scr attribute menjadi data-src attribute pada image dan iframe Youtube.

Maka kini kita akan membuat pure javascript untuk otomatis menambahkan class="lazyload" dan merubah src attribute menjadi data-src attribute pada image dan iframe Youtube serta otomatis merubah iframe video Youtube menjadi responsive.

Dengan pure javascript maka tidak memerlukan jquery library sehingga blog yang tidak menggunakan jquey library bisa menggunakan lazy load dengan lazysize.js karena lazysize.js sendiri tidak memerlukan jquery library.

DEMO

Yang ingin mencobanya silahkan copy kode di bawah ini dan simpan di atas kode </body>.

<script async='async' src='https://cdn.rawgit.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js' type='text/javascript'></script>

<script>

//<![CDATA[

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].removeAttribute('src');

        }

        videos[i].setAttribute("class","lazyload");

        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>");

//]]>

</script>