Sajnos a WordPress alapértelmezés szerint nem ad hozzá egy beágyazott kódot a divhoz, tehát ez az első dolog, amire szükségünk van ahhoz, hogy működjön.

Add hozzá a témád function.php fájljához:

// 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’ );

És felfelé, hozzá kell adnunk a CSS-t, amely a stílusunkra reagál.
.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%; }

És ez az! Ezután az iframe, object, embed és a video (html5) elemeket válaszolják. A reagáló CSS mindig 16:9 képarányú videókat jelenít meg, ami HD.
Ez a kód a Jetpack beágyazásokkal is együttműködik.