The WordPress block editor (Gutenberg) provides some great embed blocks. There are dedicated blocks for embedding YouTube, Vimeo, self-hosted videos, and more.
However, the main problem I noticed about embedding iframes on a page is the responsive issue.
The embed code usually contains an absolute sizing (e.g.
iframe width="560" height="315"). This means the embedded content won’t be dynamically adjusted to different resolutions.
Fortunately, this can be easily solved with a short snippet of code.
Add the following code to your theme’s
functions.php file or to another theme configuration file if exists.
// Add support for responsive embedded content (YouTube, Vimeo, etc.). add_theme_support( 'responsive-embeds' );
This will add the
wp-embed-responsive class to the
This will enable the responsive feature by appliyng relevant CSS settings to the embedded content. For example, see CSS settings for
.wp-embed-responsive .wp-has-aspect-ratio iframe.