Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Make Youtube Embedded Videos Responsive With Defer Iframe and Jquery

Make Youtube Embedded Videos Responsive With Defer Iframe and Jquery-how to create a video blog embed Youtube be Responsive to Jquery and equipped with defer iframe so as not to burden loading blog. If your blog has a lot of posting a Youtube Video using the video embed code, then with jquery all the videos will automatically be responsive and loading of the iframe will be loads too defer or deferred until all elements contained as screen. Usually embed Youtube video will look like below
After using this Jquery then automatically will be look like this. 
    
Well jquery to automatically convert youtube video embed be responsive to defer iframe like this, Paste this jquery above the code body> 
//$(document).ready(function() {    $('iframe[src*="youtube.com"]').wrap('
');
    $('iframe[src*="youtube.com"]').css({        "position": "absolute",        "top": "0",        "left": "0",        "width": "100%",        "height": "100%",            });    $('iframe[src*="youtube.com"]').each(function() {        $(this).attr("data-src", $(this).attr("src"));        $(this).attr("src", "")    });}); function init() {    var vidDefer = document.getElementsByTagName('iframe');    for (var i = 0; i         if (vidDefer[i].getAttribute('data-src')) {            vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));        }    }}window.onload = init;//]]>

Please try different different device or resize your browser to see the responsive video.


This post first appeared on LabLance - Digital World Inspiration, please read the originial post: here

Share the post

Make Youtube Embedded Videos Responsive With Defer Iframe and Jquery

×

Subscribe to Lablance - Digital World Inspiration

Get updates delivered right to your inbox!

Thank you for your subscription

×