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> |