Día 9: Videos de Youtube y Vimeo responsivos con JS

Si estás buscando mantener una altura proporcional en tus videos de YouTube o Vimeo, te darás cuenta que al asignarle un ancho del 100%, tus videos se verán cómo un chorizo.



La solución a este problema es calcular la altura de nuestro video y obtener, en una proporción a 16:9, la altura.

function alturaproporcionalparamivideoporfis(width) {
  return 9/16*width;
}

Este código lo utilizaremos para asignarle la altura al cargar el script y al redimensionar la ventana.

resizeChorizos();
window.onresize = function(event) {
  resizeChorizos();
}

Y nuestra función principal queda de la siguiente manera.

function resizeChorizos() {
  var chorizos = document.getElementsByClassName("chorizo");
  for(var i =0, il = chorizos.length;i<il;i++){
    chorizowidth = chorizos[i].offsetWidth;
    chorizoheight = alturaproporcionalparamivideoporfis(chorizowidth);
    chorizos[i].style.height = chorizoheight+'px';
  }
}


palabras / Compartir en: Facebook , Twitter o copiar enlace