vagacode

¿Es posible automatizar el ancho de los vídeos para que se vean lo más grande posibles? Sí. Digamos que es relativamente sencillo aunque para automatizar este tipo de cosas hay que ser prolijos ya que los navegadores no son adivinos así que los datos siempre deben ser escritos de manera más o menos similar.

Cuanto más automatizamos una tarea, más cuidado tenemos que tener para establecer límites precisos ya que los navegadores no son inteligentes, no tienen sentido común ni ninguna otra característica humana; simplemente hacen lo que nosotros les indicamos que hagan.

Veamos el concepto general.

Si creo un contenedor sin un ancho definido, una altura de cero y un padding inferior del 20% veré un rectángulo que ocupará el ancho total del contenedor y cuya altura será un 20% de ese ancho:

Como he definido la propiedad position como relativa, le agregaré cierto contenido posicionándolo de manera absoluta, estableciendo los valores de height y width al 100%, el contenido se expandirá ocupando todo el contenedor:

<div style="background-color:#ffc107;padding-bottom:20%;height:0;position:relative">
	<img style="height:100%;left:0;position:absolute;top:0;width:100%;" src="http://i.imgur.com/w6Lff7Sl.png">
</div>

Variando el valor del padding, la imagen tendrá más o menos altura, pero siempre ocupará el mismo ancho.

• 10%
• 20%
• 30%

Obviamente, cuando el contenido son imágenes, este tipo de técnica no tiene sentido porque no es razonable que ocupen el ancho total y necesitamos conocer su altura para evitar que se deformen. En ese caso, lo mejor es mostrarlas con su altura total y dejar que el ancho sea calculado por el navegador:

<div style="text-align:center;">
	<img style="height:100%;vertical-align:middle;width:auto;" src="url_imagen">
</div>

Sin embargo la técnica es muy útil cuando se trata de incrustar vídeos de distintos servicios externos como YouTube ya que conocemos su dimensión y entonces, podemos calcular su relación ancho/alto (aspect radio) ¿Y cuál es esa proporción? Eso depende de gustos personales,, hay tres que son consideradas estándar: 4:3, 16:9 y 21:9.

El cálculo es sencillo:

4:3 calculamos 3 / 4 = 0.75 o 75%
16:9 calculamos 9 / 16 = 0.5625 o 56.25%
21:9 calculamos 9 / 21 = 0.4286 o 42.86%

Entonces, basta usar un contenedor con una clase ya definida y colocar el iframe dentro sin modificarlo en absoluto:

<div class="video">
	<iframe width="560" height="315" src="url_video" 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:

.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%;
}

¿Y por qué padding-top: 30px? 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 así que, simplemente, usamos un valor promedio.

Claro que si la pagina es muy ancha esto no será demasiado estético así que podríamos establecer alguna clase de limitación en su ancho máximo; como siempre ocupará el 100% de algo, hay que agregar otro contenedor que es el cuál dimensionaremos:

<div class="video-contenedor">
	<div class="video">
		<iframe width="560" height="315" src="url_video" allowfullscreen></iframe>
	</div>
</div>

y agregaré este tipo de regla:

.video-contenedor {
	margin: 0 auto;
	max-width: 100%;
	width: 300px;
}

Probemos:

• 300px
• 480px
• 640px