Los iframes responsivos de carga diferida con JavaScript Vanilla

Vista prévia

Descripción

Una biblioteca de JavaScript vainilla utilizada para hacer que su iframe responda ajustando automáticamente el alto y el ancho en función de su contenido interno y el tamaño de la pantalla. Ideal para video de YouTube e incrustación de fotos de Instagram.

Funcionamiento

Incluya lazysizes. js para retrasar la carga del contenido de iframe.

<script src='//cdnjs.cloudflare.com/ajax/libs/lazysizes/1.4.0/lazysizes.min.js'></script>

Inserte el contenido en sus iframes usando el atributo ' Data-src ' como este:

<iframe allowtransparency="true" frameborder="0" height="710" scrolling="no" data-src="//instagram.com/p/zkOqETkZjI/embed/" width="612" class="lazyload"></iframe>

La función principal de JavaScript:

window.responsiveIframes = {


defaults: {


width: 610,


extraHeight: 80,


breakpoint: 620,


fullWidth: true, // If true, iFrame will always have a width of 100% until it reaches maxWidth


maxWidth: 800, // Only works when fullWidth is true. Sets CSS max-width to this value.


src: ['instagram.com'],


lazysizes: true // Compatible with lazysizes


},



options: {},


frames: [],


initialized: false,



init: function(param_options) {




this.frames = [];





if (arguments.length === 1 && typeof param_options === 'object') {






this.options = this.helpers.extend(this.defaults, param_options);




} else {






this.options = this.helpers.extend(this.defaults, {});




}





this.initialized = true;





// Attach listeners to resize iFrame with window.




window.addEventListener("load", function() {






window.responsiveIframes.resizeFrames();




});




window.addEventListener("resize", function() {






window.responsiveIframes.resizeFrames();




});



},


resizeFrames: function() {




if (!this.initialized) {






this.init();




}





if (this.frames.length === 0) {






this.frames = this.helpers.getIframes(this.options.src);




}





for (var i = 0; i < this.frames.length; i++) {






this.resizeFrame(this.frames[i]);




}


},


resizeFrame: function(elem) {




var width;




var windowWidth = this.helpers.windowWidth();




var newHeight;





if (this.options.fullWidth) {






elem.style.width = '100%';






elem.style.maxWidth = this.options.maxWidth + 'px';




} else {






if (windowWidth <= this.options.breakpoint) {








elem.style.width = '100%';






} else {








elem.style.width = this.options.width.toString(10) + 'px';






}




}





width = elem.offsetWidth;





newHeight = Math.round(width + this.options.extraHeight);




elem.style.height = newHeight.toString(10) + 'px';


},


helpers: {




windowWidth: function() {






var docElemProp = window.document.documentElement.clientWidth;






var body = window.document.body;






return window.document.compatMode === "CSS1Compat" && docElemProp || body && body.clientWidth || docElemProp;




},




extend: function(obj, extObj) {






if (arguments.length > 2) {








for (var a = 1; a < arguments.length; a++) {










this.extend2(obj, arguments[a]);








}






} else {








for (var i in extObj) {










obj[i] = extObj[i];








}






}






return obj;




},




getInstagramIframes: function() {






var matchingElements = [];






var allElements = document.getElementsByTagName('iframe');







for (var i = 0; i < allElements.length; i++) {








var src = allElements[i].getAttribute('src');








if (src !== null && src.indexOf('instagram.com') !== -1) {










matchingElements.push(allElements[i]);








}






}







return matchingElements;




},




getIframes: function(param_src) {






var matchingElements = [];






var allElements = document.getElementsByTagName('iframe');







for (var i = 0; i < allElements.length; i++) {








var src = allElements[i].getAttribute('src');









if (src === null || (typeof src === 'string' && src.length === 0)) {










src = allElements[i].getAttribute('data-src');








}









if (src !== null) {










if (Array.isArray(param_src)) {












for (var j = 0; j < param_src.length; j++) {














if (src.indexOf(param_src[j]) !== -1) {
















matchingElements.push(allElements[i]);














}












}










} else {












if (src.indexOf(param_src) !== -1) {














matchingElements.push(allElements[i]);












}










}








}






}







return matchingElements;




}


}

};

Inicializar con un solo dominio:

window.responsiveIframes.init({src: 'instagram.com'});

Inicializar con varios dominios:

window.responsiveIframes.init({

src: ['instagram.com', 'youtube.com'],
});