Laboratorio Web

MENU

Video de YouTube o de Vimeo líquido

Vamos a hacer un video de YouTube o de Vimeo elástico o líquido:

En este ejemplo, insertaremos un vídeo de YouTube o de Vimeo en un iframe.

Para eso, elegimos un vídeo de Youtube y nos fijamos en la url, como por ejemplo este:

http://www.youtube.com/watch?v=5Wmo-MZP9bI

donde el Id es: 5Wmo-MZP9bI, por lo que el código para ese video será el siguiente:

<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/5Wmo-MZP9bI" frameborder="0"></iframe>	

Simplemente, se trata de reemplazar el parámetro VIDEO_ID por el ID del video de YouTube que se encuentra en la URL

<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"></iframe>	

Ahora colocaremos bien el iframe en nuestro html y aplicaremos los estilos CSS para hacerlo adaptativo o responsive.

El código html:

<div class="padre">		<!-- nos servirá para darle una anchura máxima al vídeo -->
	<div id="contenedor">			<!-- contenedor del vídeo -->
		<iframe 
			src="http://player.vimeo.com/video/29186408" 
			width="500" 
			height="281" 
			webkitAllowFullScreen 
			mozallowfullscreen 
			allowFullScreen
		>
		</iframe>			
	</div>
</div>
		<!-- OJO!! los parámetros "webkitAllowFullScreen" y "allowFullScreen"	no pasan el validador de la W3C!! -->
		

El código CSS:

#contenedor {
	position: relative;
	padding-bottom: 56.25%;		/* si el video no es apaisado, se pondría 75%  */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	display:block;
}
#contenedor iframe,
#contenedor object,
#contenedor embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*  ANCHURA POR DEFECTO DEL VIDEO   */
.padre {
	max-width: 800px;  /* En este caso, he elegido 800px, este valor se puede cambiar por la anchura que queramos */
}

Comentemos el código:

La posición relativa del contenedor nos permite colocar el iframe de forma relativa a este, haciendo que esté situada arriba a la izquierda, y que ocupe el 100% de la altura y la anchura del contenedor.

Los 30px de padding se corresponden con el espacio que hay que dejarle al iframe para que se visualicen correctamente los controles del vídeo.

La propiedad más curiosa es el padding bottom. Le estamos dando un valor de 56.25% porque el vídeo tiene un formato panorámico, o de 16:9. Esto es el aspect ratio, o la proporción entre ancho y alto del vídeo.

Para vídeos en 16:9, haremos la división de 9 entre 16, lo que nos da 0.5625. Esto es un 56.25%, y lo aplicaremos como padding-bottom.

Si el vídeo tuviese un aspect ratio de 5:4 , la división 4/5 nos daría 0.75; es decir, un 75% que aplicaremos de padding-bottom.