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 <body>
tag.
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
.