Vídeo de ancho de fluido

EN UN MUNDO de diseños fluidos y responsivos en la web, UN TIPO DE MEDIO se interpone en el camino de la armonía perfecta: el video. Hay muchas maneras en que se pueden mostrar videos en su sitio. Es posible que usted mismo aloje el vídeo y lo presente a través de la videoetiqueta HTML5. Es posible que esté utilizando YouTube, Vimeo o algún otro proveedor de videos que proporcione iframeel código para mostrar videos. Veamos cómo hacer que todos tengan un ancho fluido manteniendo una altura adecuada según su relación de aspecto.

En cada uno de estos escenarios de incrustación de vídeo, es muy común que se declare una widthestática.height

video controls ... /videoiframe ... /iframe!-- maybe even super old school --object ... /embed ... /

¿Adivina qué? Declarar anchos estáticos no es una buena idea en entornos de ancho fluido. ¿Qué pasa si el contenedor principal de ese vídeo se reduce más que el declarado 400px? Estallará y probablemente quedará ridículo y vergonzoso.

Entonces, ¿no podemos simplemente hacer esto?

video ... /video

¡Bueno, sí, puedes! Si está utilizando un video HTML5 estándar, esto hará que el video se ajuste al ancho del contenedor. Es importante que elimine la heightdeclaración cuando hagas esto para que la relación de aspecto del video se mantenga a medida que crece y se reduce, para que no aparezcan “barras” incómodas para llenar el espacio vacío (a diferencia de las imágenes, el video real). mantiene su relación de aspecto). independientemente del tamaño del elemento).

Puedes llegar allí a través de CSS (y no preocuparte por lo que se declara en el HTML) de esta manera:

video {  /* override other styles to make responsive */  width: 100%    !important;  height: auto   !important;}

iframeVídeo (YouTube, Vimeo, etc.)

Nuestro pequeño truco anterior no nos ayudará cuando trabajemos con vídeos que se entregan a través de iframe. Forzar el ancho al 100% es efectivo, pero cuando configuramos height: auto, terminamos con una altura estática de 150px ¹ , que es demasiado pequeña para la mayoría de los videos y genera más RE (ridículo y vergonzoso).

Afortunadamente, existe un par de posibles soluciones aquí. Uno de ellos fue iniciado por Thierry Koblentz y presentado en A List Apart en 2009: Creación de proporciones intrínsecas para vídeo. Con esta técnica, envuelves el vídeo en otro elemento que tiene una relación de aspecto intrínseca y luego colocas el vídeo de forma absoluta dentro de ese. Eso nos da un ancho fluido con una altura razonable con la que podemos contar.

div  !-- Copy  Pasted from YouTube --  iframe src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0hd=1" frameborder="0" allowfullscreen/iframe/div

.videoWrapper {  position: relative;  padding-bottom: 56.25%; /* 16:9 */  height: 0;}.videoWrapper iframe {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}

Existe una adaptación inteligente de esto que le permite ajustar la relación de aspecto directamente desde HTML, como:

div  iframe ...

.videoWrapper {  ...  /* falls back to 16/9, but otherwise uses ratio from HTML */  padding-bottom: calc(var(--aspect-ratio, .5625) * 100%); }

Algunos usos objecty embedetiquetas de inserción de videos de la vieja escuela, por lo que si intentas ser completo, actualiza ese selector de contenedor a:

.videoWrapper iframe,.videoWrapper embed,.videoWrapper object { }

Pero, pero… relaciones de aspecto, contenido heredado, usuarios no tecnológicos, etc.

La técnica anterior es asombrosa, pero tiene varias limitaciones posibles:

1. Requiere un elemento contenedor, por lo que simplemente copiar y pegar código de YouTube está descartado. Los usuarios deberán ser un poco más inteligentes.
2. Si tiene contenido heredado y lo está rediseñando para que sea fluido, todos los videos antiguos necesitan ajustes de HTML.
3. Todos los videos deben tener la misma relación de aspecto. De lo contrario, se verán obligados a adoptar una relación de aspecto diferente y aparecerán las “barras”. O necesitará una caja de herramientas con nombres de clases que pueda aplicar para ajustarlo, lo cual es una complicación adicional.

Si alguna de estas limitaciones se aplica a usted, podría considerar una solución de JavaScript.

Imagínese esto: cuando se carga la página, se miran todos los videos y se guarda su relación de aspecto. Una vez que se cambia el tamaño de la ventana, todos los videos cambian de tamaño para llenar el ancho disponible y mantener su relación de aspecto. Usando la biblioteca jQueryJavaScript, se ve así:

// Find all YouTube videos// Expand that selector for Vimeo and whatever elsevar $allVideos = $("iframe[src^='//www.youtube.com']"),  // The element that is fluid width  $fluidEl = $("body");// Figure out and save aspect ratio for each video$allVideos.each(function() {  $(this)    .data('aspectRatio', this.height / this.width)    // and remove the hard coded width/height    .removeAttr('height')    .removeAttr('width');});// When the window is resized$(window).resize(function() {  var newWidth = $fluidEl.width();  // Resize all videos according to their own aspect ratio  $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();

Eso es lo que se convirtió en FitVids.js.

Excepto que en lugar de ocuparse de todo ese negocio de cambio de tamaño, FitVids.js recorre todos los videos y agrega la relación de aspecto que permite el contenedor HTML y CSS necesarios. ¡Eso es mucho más eficiente que tener que vincularse a un controlador de cambio de tamaño de ventana!

JavaScript simple en su lugar

jQuery está bastante en desgracia en estos días. Afortunadamente, Dave tiene una versión Vanilla (es decir, BYO CSS):

1. Literalmente, todos los navegadores mostrarán las etiquetas iframe, canvas, embed y object como 300px × 150px si no se declara lo contrario. Incluso si esto no está presente en la hoja de estilo de UA.