Responsive en vídeos incrustados de WordPress

Si has llegado hasta aquí es posible que hayas tenido el problema de los vídeos incrustados de WordPress y el responsive.

En mi caso, al aplicar un max-width: 100% (generalmente con esto sirve para que algo se adapte a todo tipo de dispositivos), el alto del incrustado hacía algo extraño; en unos vídeos era demasiado alto y en otros demasiado estrecho.

El caso es que probé varias soluciones: le di un alto mínimo, un alto máximo, un alto fijo… Y ninguna funcionaba para todas las soluciones.

Al final, la solución es algo más rebuscada, hay que añadir un filtro como este:

/* Adds a wrapper for video embeds */
add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
  return '<div class="video-container">' . $html . '</div>';
}
Lenguaje del código: PHP (php)

Lo que hace es añadir una capa «contenedor» para nuestro vídeo incrustado.

Además, tendremos que jugar con los estilos de dicha capa contenedora:

.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%;
}
Lenguaje del código: CSS (css)

Parece mentira que aún nos sirvan soluciones de hace tres años.