Función para reescalar vídeos de Youtube / Vimeo
Esta es la función que utilizo para reescalar vídeos de youtube / vimeo manteniendo el aspect ratio. La saqué de este artículo sobre «Fluid Video» de CSS-Tricks.
Este es el código comentado.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* Selector para todos los iframes de vídeo sobre los que queremos actuar. Si tuvieramos alguno de Vimeo o de URL corta de youtube hay que incluirlo en el selector. */ var $allVideos = $("iframe[src^='//www.youtube.com']"); /* El elemento al que se tienen que adaptar los vídeos. */ $fluidEl = $("body"); /* Guardamos el aspect ratio de cada video y borramos sus atributos width y height para forzarlos. */ $allVideos.each(function() { $(this).data('aspectRatio', this.height / this.width).removeAttr('height').removeAttr('width'); }); /* En el resize de la página recalculamos los anchos y altos para cada vídeo */ $(window).resize(function() { var newWidth = $fluidEl.width(); $allVideos.each(function() { var $el = $(this); $el.width(newWidth).height(newWidth * $el.data('aspectRatio')); }); // Kick off one resize to fix all videos on page load }).resize(); |