Como Embeber un vídeo responsive de YouTube

Si alguna vez has intentado insertar algún video en tu web, es posible que lo hayas subido a youtube y luego hayas ido a la sección de compartir y copiado el código que te dan para incrustarlo en tu web, pero al ver el resultado, ves que generalmente aparece con un tamaño y alineación que no es buena, esto me ha pasado muchas veces y por eso hoy os traigo el tutorial sobre como hacer para que tu vídeo se adapte de forma dinámica al tamaño de tu web.

Lo primero que debemos hacer es ir al vídeo que queremos embeber en nuestra página web y pinchar en compartir:

A continuación nos aparecerá en pantalla una sección que nos permite seleccionar donde compartir, pulsaremos en Insertar:

Una vez pulsado insertar nos aparecerá lo siguiente:

A continuación lo pegaremos en nuestra página, una vez copiado, debemos añadir el siguiente código CSS en el archivo CSS de nuestra web o dentro de una cabecera <style>:

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

Tras eso, copiaremos el enlace del código de inserción que hemos obtenido de youtube de forma que quede de la siguiente forma: