Cómo hacer responsive los videos de Youtube

Escalar proporcionalmente un video de Youtube o Vimeo con CSS

Publicado en CSS 2018-03-08 03:57:21

Cómo hacer responsive los videos de Youtube

Video responsive usando solo estilos CSS

CSS HTML

Resumen: Un video de Youtube puede ser escalado proporcionalmente con CSS, el video incrustado debe estar contenido dentro de un DIV,

Los videos son un parte elemental en una página web con contenido multimedia, pues comunicar de una mejor manera el mensaje que se desea dar a conocer. Pues bien, los videos no siempre se visualizan proporcionalmente.

 

Para escalar un video de YouTube y adaptarlo a cualquier navegador o tableta / dispositivo móvil para un diseño responsive, puede usar una solución CSS para lograr el objetivo

Este ejemplo usa una solución CSS, necesita agregar un par de estilos CSS en su archivo CSS principal.

El proceso
Lo primero que necesita es el código incrustado del iframe de YouTube, tome eso en sus opciones de compartir videos desde el sitio de YouTube.

Coloque el código iframe en su página, en este ejemplo arriba el div contenedor de iframe (div.youtubevideowrap) tiene 2 declaraciones CSS para ancho, tiene un ancho: 80% y un ancho máximo: 560.

Esto hace que el contenido sea fluido cuando se usa una unidad porcentual, también tiene un ancho máximo establecido, ya que no quiero que el video muestre más de 560 píxeles. Desde aquí necesitamos agregar un contenedor HTML alrededor del video y declarar el CSS.

Las primeras declaraciones de CSS se dirigen al contenedor de video y el segundo destino a lo que está en el contenedor, en este caso es el iframe, también se puede aplicar a los objetos y a los elementos de inserción.

El video ahora se escalará a medida que la ventana gráfica se redimensiona, el elemento mágico es la regla de fondo de relleno del 56.25%, esta cifra se alcanza al usar la relación de aspecto del video de 16 * 9, entonces 9 dividido entre 16 = 0.5625 o 56.25 %, explicación completa en el artículo de alistapart.

Este mismo proceso también se puede lograr utilizando una técnica de javascript explicada en la guía de video de Vimeo, que se comporta de forma similar a los videos de YouTube. 

Veamos el código 

<!DOCTYPE html>
<html>
<head>
	<title>Apptivaweb | Video responsivo</title>
	<style>
		.videoWrapper {
			position: relative;
			padding-bottom: 56.25%; /* 16:9 */
			padding-top: 25px;
			height: 0;
		}
		.videoWrapper iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div class="videoWrapper">    		
    	<iframe 
    		width="560" 
    		height="349" 
    		src="http://www.youtube.com/embed/__KHDu8EIUs?rel=0&hd=1" 
    		frameborder="0" 
    		allowfullscreen>    			
    	</iframe>
	</div>
</body>
</html>

 

Cómo hacer responsive los videos de Youtube

Redacción:| Artículo leído: 144 veces | Publicación:


Compártelo con tus amigos


Publicaciones relacionadas de CSS