Videos y contenidos fluidos

Este es otro método para agregar videos fluidos en una página web, es decir, que sin importar su tamaño, ocupen el ancho total del contenedor y su alto sea siempre proporcional y no haya necesidad de hacer cálculos para cada caso.

En dos entradas anteriores se mostraba cómo hacerlo usando jQuery o JavaScript común y corriente pero, este otro tiene una ventaja sobre aquellos: sólo requiere CSS por lo que el método se simplifica sustancialmente y el resultado es instantáneo.

Según lo que nos explica alistapart.com, la idea es crear un contenedor con una proporción idéntica o casi idéntica al formato del video (4:3, 16:9, etc.) de tal modo que este, se inserte ocupando ese espacio y eso es lo que se logra utilizando las propiedades padding.

Si creo un contenedor donde no indico su ancho y le coloco estas propiedades:

<div style="padding-bottom:20%;height: 0;position: relative;"></div>

veré un rectángulo que ocupará el ancho total de estas entradas (635 pixeles) y tendrá una altura equivalente al 20% de ese ancho (127 pixeles):

Ahora, si coloco cierto contenido dentro de ese DIV posicionándolo de modo absoluto, estableciendo los valores de height y width al 100%, ese contenido se expandirá ocupando todo el contenedor; por ejemplo, una imagen:

<img style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;;" src="URL_IMAGEN" />

Con los videos pasa lo mismo, todo se limita a colocar el código del video a incrustar (sea este una etiqueta IFRAME o una etiqueta OBJECT) dentro de un DIV al que identificaremos con una clase especial que acá, en un rapto de originalidad, llamaré video:

<div class="video">
  <iframe width="420" height="315" src="http://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
</div>

Es el código que nos da YouTube con cierto tamaño por defecto y lo usamos tal cual ya que la clave son las reglas de estilo para esa clase:

<style>
  .video {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
  }
  .video iframe, .video object, .video embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
</style>

Y en este caso, ¿de dónde sale ese valor de 56.25%? Simplemente, es la proporción del video (aspect ratio = 16:9) ya que 9/16 = 0.5625 o sea que la altura es un el 56.25% del ancho; si quisiéramos que la proporción fuera 4:3 el valor sería 75%.

¿Y por qué padding-top: 25px? Porque a la altura del video debemos sumarle la altura de la barra con los controles que en el caso de YouTube es de unos 25 pixeles y que en otros servicios varia aumentando hasta 35 pixeles aproximadamente.

¿Y si no quiero que abarque el 100%? En realidad, siempre abarcará el 100% de "algo", ya que todo contenedor es parte de otro hasta llegar al BODY mismo; en una entrada de Blogger el 100% será el DIV del post en si mismo así que si quisiera que fuera más angosto, debería poner mi DIV de clase video y el IFRAME dentro de otro al que dimensionaré:

<div class="video-contenedor">
  <div class="video">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

y agregaré este tipo de regla:

.video-contenedor {
  margin: 0 auto;
  max-width: 100%;
  width: VALORpx;
  /* y le agrego transisiciones porque si */
  -moz-transition: width 1s;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  -ms-transition: width 1s;
  transition: width 1s;
}

indicando el valor de su ancho.

En este ejemplo, tiene 300 pixeles y haciendo click en los enlaces inferiores, el ancho del contenedor variará y su contenido se re-dimensionará inmediatamente:

200 | 300 | 400 | 500 | 600