Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Easily Embed iFrame Code in WordPress (3 Methods)

Do you want to embed iFrame code in a WordPress post or page?

iFrames are an easy way to show video or other content on your site without uploading it. Many third-party platforms like YouTube provide iFrame code that you can simply paste into your website.

In this article, we’ll show you how to easily embed iFrame code in WordPress.

Easily embedding iFrame code in WordPress

Why Should I Embed iFrame Code in WordPress?

An iFrame lets you embed videos or other content on your site. This means you can display a video on your WordPress blog or website without having to actually host that video.

The iFrame is like opening a window on your site to show external content. The actual content is still loaded from the source that you’re embedding it from.

This means you don’t have to host videos or other resources on your site, which can save you bandwidth and storage space. Another advantage is that if the original content is changed, then the iFrame will update automatically.

iFrames also help you avoid infringing on copyrighted content.

Having said that, let’s see how you can easily embed iFrame code in WordPress. Simply use the quick links to jump straight to the method you want to use.

Method 1. Use the Source’s Embed Code to Add iFrame in WordPress (Quick and Easy)

Many large sites add an ‘Embed’ option to their content. Often, clicking on these settings will give you the iFrame code you need to add to your site.

If the website has ‘Sharing’ or ‘Embed’ settings, then this is the quickest and easiest way to embed content.

Let’s look at an example.

On YouTube, you can get the iFrame code by clicking the ‘Share’ button below any video.

Clicking the Share button for your chosen YouTube video

After that, you’ll see a popup with different sharing options.

Simply go ahead and click on the ‘Embed’ button.

Clicking the Embed button to get the YouTube embed code

YouTube will now show you the iFrame code. By default, YouTube will include the player controls, but we also recommend enabling the privacy-enhanced mode.

After that, go ahead and click the ‘Copy’ button.

Copying the embed code for the YouTube video

Now, you can paste that code into any post or page on your site. We’re going to add it to a new page in the block editor.

To create a new page, go to Pages » Add New in your WordPress dashboard. Then, click on the ‘+’ button and start typing ‘HTML’ to find the custom HTML block.

Adding a custom HTML block to WordPress

Simply click to add the block to your page.

Then, go ahead and paste the YouTube iFrame code into the block.

Pasting the YouTube HTML code into the iFrame block

You can now preview or publish your page to see the YouTube video in action.

Method 2. Using the iFrame WordPress Plugin (Works With All Websites)

Not every website provides an embed code. If you can’t see any ‘Share’ or ‘Embed’ settings, then you can create your own iFrame code using the iFrame plugin.

First, you need to install and activate the iFrame plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, the plugin will start working straight away with no setup needed.

Simply go to the page or post where you want to embed content, and add a shortcode block.

Adding a shortcode block in the block editor

After that, add the following code:

[iframe src="URL goes here"]

Simply replace ‘URL goes here’ with the URL of the content you want to embed on your site. In our example, we’re embedding a Google Map.

Tip: Depending on the source, you may need to click on a ‘Share’ or similar setting to see the content’s direct URL.

The shortcode to embed a Google map

After that, just preview or publish the post.

You should now see the content embedded on your website.

The Google map embedded on the website

You can change how the content looks by adding some extra parameters to the shortcode. For example, you can change the width and height, or add a scrollbar or border.

To see all the available parameters, take a look at the iFrame plugin page.

Method 3. Manually Creating the iFrame Code and Embedding in WordPress (No Plugin)

If you don’t want to use a special plugin, then you can create the iFrame code manually.

To do this, you need to open the page or post and then add an HTML block in the WordPress content editor.

Adding a custom HTML block

First, paste the following code into your HTML block:

<iframe src="URL goes here"></iframe>

Simply replace ‘URL goes here’ with the direct URL for the content that you want to embed.

Here, we’re embedding a Google Map:

Entering the iFrame code for the Google map

You can add extra parameters to change how the content looks on your website. For example, here we’re setting the width to 600 pixels and the height to 200 pixels:

<iframe src="URL goes here" width="600" height="300"></iframe>

This is useful if you need to show the embedded content in a smaller space.

The Google map on the site with a set height and width

What Are Some iFrame Alternatives?

There are some drawbacks to using iFrames.

Not all websites let you put their content into an iFrame, and you may need to manually adjust the content so that it fits in the available space.

Another issue is that HTTPS sites can only use iFrames for content from other HTTPS sites. Similarly, HTTP sites can only use iFrames for content from other HTTP sites.

This is why many platforms like WordPress prefer oEmbed.

Often, you can use oEmbed to embed videos and other content by simply pasting a URL into the WordPress post. WordPress will automatically resize the oEmbed to fit the available space, so it will always look perfect on desktop, smartphones, and tablets.

Important: WordPress no longer supports oEmbed for Facebook and Instagram posts by default. For more on this topic, check out our full guide on how to fix the Facebook and oEmbed issue in WordPress.

If you want to show social feeds on your website, then we recommend using a social media plugin rather than iFrames. Smash Balloon makes it easy to embed content from Facebook, Instagram, Twitter, and YouTube.

An example of an Instagram feed, created using Smash Balloon

We hope this article helped you learn how to easily embed iFrame code in WordPress. You may also want to check out our guide on how to create a custom Instagram photo feed in WordPress or see our expert pick of the best YouTube gallery plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

4 CommentsLeave a Reply

  1. thanks for your article of how to easily embed iframe code in wordpress.

    Now i am trying to embed iframe code in wordpress for google map.

    i am success it for solving this problem.

    Thanks and regards.

  2. Thanks for this. When embedding a YouTube video, how can I add a title to the iframe for screen readers, for accessibilty purposes?

    • You would need to check with the support for the iframe you’re trying to embed for title options available.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.