Use the provided CSS classes from WordPress
Add the following call in the functions.php file of your current theme, if not already part of it.
// Add support for responsive embed blocks. add_theme_support( 'responsive-embeds' );
(This adds the ‘wp-embed-responsive’ CSS class to the <body> of your posts.)
You can use the provided CSS classes with the following syntax in your posts.
<figure class="wp-has-aspect-ratio wp-embed-aspect-16-9"> <div class="wp-block-embed__wrapper"> <iframe ...></iframe> </div> </figure>
Link: /wp-includes/blocks/embed/style.css (on GitHub)
Alternative: Add your own CSS classes to the current theme
Add the following code at the end of the style.css file with an FTP client or the in-house editor.
/*--------------------------------------------------------------
# - Responsive iframe
--------------------------------------------------------------*/
.res-con { /* responsive-container */
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.res-con.ar-16-9 {
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.res-con.ar-4-3 {
padding-top: 75%; /* 4:3 Aspect Ratio */
}
.res-con iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
(The default aspect ratio is 16:9, so you don’t have to add ‘ar-16-9’.)
You can use the added CSS classes with the following syntax in your posts.
<div class="res-con ar-16-9"> <iframe ...></iframe> </div>