YouTube vídeos con Auto-width/height

Si necesitas añadir un vídeo de YouTube u otro proveedor a tu blog/web te encontrarás, con que al redimensionar la ventana del navegador o visitarla desde un dispositivo móvil, el vídeo continúa con las medidas establecidas en sus atributos, por lo que afecta a la maquetación de la web.
Para solucionar esto hacen falta un par de clases CSS.

La solución:

Añadir el vídeo de YouTube (ejemplo) con el siguiente código, substituyendo {{{VIDEO_ID}}} por el id del vídeo en cuestión.

[XML]

[/XML]

Verás que el object esta encapsulado en un div con la clase video-container, pues eso, añadimos las siguientes clases CSS a nuestro fichero.

[CSS]
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
[/CSS]

El vídeo que insertes tendrá, a partir de ahora, el tamaño de su contenedor al redimensionar.
También existe una solución por javascript, en los siguientes enlaces: