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

<iframe width="580" height="350" src="Youtube url" frameborder="0" allowfullscreen></iframe>

After using this Jquery then automatically will be look like this.

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%"> <iframe width="580" height="350" src=" Youtube url " frameborder="0" allowfullscreen="" data-src=" Youtube url " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></iframe></div>

Well jquery to automatically convert youtube video embed be responsive to defer iframe like this, Paste this jquery above the code </ body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script>//<![CDATA[$(document).ready(function() { $('iframe[src*="youtube.com"]').wrap('<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%"></div>'); $('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 < vidDefer.length; i++) { if (vidDefer[i].getAttribute('data-src')) { vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src')); } }}window.onload = init;//]]></script>