How to embed iframe code in WordPress

How to use iframes with WordPress

Block editor

While the WordPress block editor does not have a default block for adding iframe, there are a number of plugins that support adding iframe to your WordPress posts and/or pages. Using a block would be the preferred method for adding an iframe to the page.

If you do not already have a plugin with an iframe block installed on your WordPress site, blocks can be searched and installed directly from the block editor. Alternatively, you can install the plugin using the WordPress admin dashboard and then return to editing your page/post.

Shortcode

If your website is using the classic editor, as opposed to the newer block editor, then you can add iframe to your pages and posts using a shortcode, which is provided by a number of plugins. Similar to the iframe block mentioned above, a shortcode can be used to add an iframe to your website.

Implementation example

To add iframe functionality via shortcode, you can add this code snippet to your theme’s functions.php file or a custom plugin:

function custom_iframe_shortcode($atts) {
    $attributes = shortcode_atts(
        array(
            'src' => '',
            'width' => '100%',
            'height' => '450',
            'scrolling' => 'no',
            'frameborder' => '0',
            'allowfullscreen' => 'allowfullscreen'
        ),
        $atts
    );
    
    return '<iframe src="' . esc_url($attributes['src']) . '" 
                   width="' . esc_attr($attributes['width']) . '" 
                   height="' . esc_attr($attributes['height']) . '" 
                   scrolling="' . esc_attr($attributes['scrolling']) . '" 
                   frameborder="' . esc_attr($attributes['frameborder']) . '"
                   ' . esc_attr($attributes['allowfullscreen']) . '></iframe>';
}
add_shortcode('iframe', 'custom_iframe_shortcode');

Once registered, you can easily embed content using this syntax:

[iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"]

For Google Maps integration, simply adjust the parameters:

[iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450"]

Embed code (HTML)

Sometimes, a site’s embed code isn’t as simple as a URL. In such a case, the embed code can be added to a WordPress page using the HTML block. If this is necessary, then the site or service will provide the embed code that can be copied and pasted onto the page. In WordPress, this would use either the custom HTML block in the block editor or the HTML tab of the classic editor.

Real-world example: YouTube embedding

Here’s how to embed a YouTube video using the HTML block:

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

Adding this to your WordPress page is straightforward:

1. Add a new Custom HTML block in the block editor
2. Paste the iframe code into the block
3. Preview and publish your changes

Real-world example: Google Maps

Similarly, you can embed Google Maps with this HTML code:

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387193.3059390053!2d-74.2598688260!3d40.6971494059!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY!5e0!3m2!1sen!2suk!4v1631013896758!5m2!1sen!2suk" 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy">
</iframe>