WordPress Managed Hosting - 40% Off For 4 Months - Coupon Code: BFCM2021 Avail Now

How to Embed WordPress iFrame With Or Without a WordPress iFrame Plugin

Ibad Rehman — November 22, 2019 6 Minutes Read
WordPress iFrame

Disclaimer: WPblog is a part of Cloudways, a Managed Cloud Hosting service, but any assumptions or analysis made on this property belong solely to their writers.

How to embed WordPress iFrame? What is WordPress iFrame and what does it really do? Great, you’re asking the right questions, and I’m about to answer all of them including how to embed iFrame with or without a plugin!

Now you’ve probably browsed thousands of websites with each using various forms of media like images, videos, Gifs, and audio clips, etc. Why? Because everyone wants their WordPress blog or website to be engaging, interactive, and look attractive. However, hosting all the videos and images in-house requires a lot of resources and can even impact negatively on your website’s performance.

So it’s no secret that a static web page with less content loads faster than a dynamic web page with images and videos. This is where iFrame steps in to steal the show. How? Let’s find out.

What is an iFrame?

An iFrame is an HTML tag that you can use to display content from another website on your WordPress site. You can think of it like a window that allows visitors to interact with content from another website hosted somewhere else without leaving your website.

In essence, you can have a dynamic page on your site without hosting the content on your servers, thereby saving the impact on your server and website load speeds.

Similarly, if you embed, and not download and upload, YouTube videos on your website, your users can watch those videos without any extra load on your servers because the videos are streaming directly from YouTube’s server.

So even if you run a movies review website with thousands of trailers, you can simply embed movie trailers from YouTube or Vimeo without any additional resources. Isn’t that awesome?

Examples of iFrame

Let’s look at some of some examples where iFrames are used to display information.

Examples of iFrame

YouTube video embedded in a blog post

Pros & Cons of Using an iFrame?

There are a few pros and cons to using iFrame, and being a webmaster you should be aware of both.

Pros

  • iFrame allows you to embed visual content freely.
  • iFrames can display multiple ads.
  • It’s a convenient way to display content from an external source anywhere on the website.
  • It’s secure as users don’t have access to the original content’s code.

It’s not all roses, though. While iFrame is a great way of displaying content from an external website, there are some cons to using it as well.

Cons

  • It can slow down the web page. Avoid using it unless it is needed.
  • They can pose security threats if linked with malicious websites that can infect a user’s computer.
  • Not all device types support iFrame.
  • It’s not ideal for search engine optimization.

Judging by the pros and cons of using iFrame, you can make an informed decision of whether you want to use it on your site or not.

Let’s take a look at how to embed iFrame in WordPress now.

Also Read: Easy Steps to Install Forum in WordPress With 8 Top WordPress Forum Plugin

How to Embed WordPress iFrame With a Plugin

The easiest way to use iFrames in WordPress is via a iFrame plugin. While there are quite a few plugins available, I’m using Advanced iFrame plugin for this tutorial.

To install the plugin, simply log into your WordPress dashboard and go to Plugins → Add New and search for Advanced iFrame plugin.

Advanced iframe plugin

Once the WordPress iFrame plugin is installed and activated, navigate to Advanced iFrame tab from the side menu and click on the Basic Settings tab from the top.

Advanced iframe basic settings

You can define the layout, such as width, height, border, and scrolling behavior of your iFrame from here.

WordPress iframe layout

To save the setting and to generate a shortcode, click on the Generate a shortcode for the current settings button.

Generate a shortcode for the current settings

Copy the generated code and paste it inside any page you wish to embed this iFrame.

how to embed iframe in wordpress

The width and height, if you notice, are explicitly defined inside the shortcode and you can change them as per your requirements.

This is how it looks like after you’ve placed the shortcode inside one of your pages.

Sample WordPress iframe

I have successfully embedded an external website to my WordPress site using the WordPress iFrame plugin.

If you need to change the width or height of the iFrame, simply manipulate the size numbers within the shortcode.

Let’s run a quick speed test of our WordPress site before and after using the WordPress iFrame using a plugin.

Before

before iframe embed result

After

after embedding iframe final result

Evidently enough, there is a huge difference in performance. After using the plugin to integrate an iFrame the number of requests increased from 8 to 98 and the performance grades went down from 96 to 86.

Let’s see if adding an iFrame in WordPress without a plugin has a similar impact on the performance or not.

Embed WordPress iFrame Without a Plugin

You don’t have to be a geek to write a simple code needed to add an iFrame to your WordPress site. If you have added HTML codes before, you will find this method simple to use.

The default code to use for an iFrame is:

However, you may add additional parameters to achieve the desired width and height.

In the code above, I’ve defined the width to occupy the complete width of the container and set the height at 300px.

I’ve also allowed scrolling because I want my visitors to scroll through the whole web page. However, in some cases, you may need to set it to “no” if you only wish to show a specific section of the web page.

As for alignment, I’ve set it to “left”, but you can set it to “right”, “top”, or “bottom.”

Let’s do another quick speed test to analyze the site’s performance before and after using the WordPress iFrame without a plugin.

Before

embed iframe in wordpress without plugin

After

WordPress iframe after results

Using iFrame without a plugin results in pretty much the same speed scores.

Both the methods above should give you an idea of how iFrames can slow down the page speed. However, since it saves you a lot of server resources and doesn’t affect your site’s performance overall, you can make a decision for yourself whether you should use iFrame to WordPress on your site or not!

Faster WordPress Websites!

Get WPblog’s ebook with tips & tricks to help you turn your WordPress site blazing fast. For free.

    Final Thoughts

    I’ve covered the significance of using WordPress iFrames and the advantages and disadvantages of using them in this article. You also learned two different ways of adding iFrames in a WordPress site and the impact it has on your site’s speed.

    If you found this article useful, don’t forget to let me know in the comments section below so I can keep creating these useful tutorials for you!

    Create Faster WordPress Websites!

    Free eBook on WordPress Performance right in your inbox.


      Create Faster WordPress Websites!

      Free eBook on WordPress Performance right in your inbox.

        Ibad Ur Rehman is a WordPress Community Manager at Cloudways. He likes to explore latest open-source technologies and to interact with different communities. In his free time he likes to read, watch a series or fly his favorite Cessna 172SP in X Plane 10 flight simulator.

        THERE'S MORE TO READ

        Newsletter

          WordPress Help Zone - Ultimate WordPress Pit-Stop

          Learning WordPress? Or are you expert enough to help others? Join our WP Facebook group!