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>

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

1 COMMENT

  1. Your this very article simply helps me to make you-tube embedded videos more responsive and with defer I frame. Really a great and perfectly helpful article, thanks for sharing a great piece of content. Love the way how you have explained each single piece ….

LEAVE A REPLY

Please enter your comment!
Please enter your name here