• Translate

2/27/2017

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

Tutorial Blogspot |

Advertisement

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>
<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>

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • 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

No comments Add Comment

Comments not appropriate topic will sign SPAM.