Como deixar os vídeos do Youtube responsivo no WordPress

Infelizmente, o WordPress não adiciona códigos div embutidos por padrão, então esta é a primeira coisa que precisamos fazer para que funcione.

Adicione o código abaixo no seu arquivo functions.php do seu tema:

/*  Add responsive container to embeds
/* ------------------------------------ */
function alx_embed_html( $html ) {
    return '
' . $html . '
';
}
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack

E, em seguida, precisamos adicionar o CSS que faz com que seja responsivo nosso vídeo

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

E é isso! Agora você terá os elementos iframe, object, embed e video (html5) responsivos.

O CSS responsivo sempre exibirá vídeos na proporção 16: 9, que é HD.

Esse código também funcionará com as incorporações do Jetpack.