Como incrustar un vídeo de youtube y que se vea responsive

Incrustar un vídeo de Youtube dentro de una página web es muy fácil, simplemente hacemos click en la opción compartir y seleccionamos ‘Insertar’:

De aquí copiamos el código HTML y lo pegamos en cualquier página web. El problema es que esté código no es responsive. Si queremos que este vídeo que colguemos en la web sea Responsive(Se haga mas grande o mas pequeño en función de la pantalla) lo podemos hacr en dos simple pasos:

Quitar el alto y el ancho

Hay que quitar el ancho y alto del código. Básicamente así:

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/fWmO9bHU_fg” frameborder=”0″ allowfullscreen></iframe>

Incrustarlo como

En la web, insertarlo dentro de un div con los siguientes estilos:

<div class="video-responsive">
<iframe src="https://www.youtube.com/embed/fWmO9bHU_fg" frameborder="0" allowfullscreen></iframe>
</div>

El código CSS necesario para que se vea responsive es el siguiente:

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

De esta manera vuestros vídeos de Youtube siempre se verán perfectos en todos los dispositivos.