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.
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?
Let’s look at some of some examples where iFrames are used to display information.
There are a few pros and cons to using iFrame, and being a webmaster you should be aware of both.
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.
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.
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.
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.
You can define the layout, such as width, height, border, and scrolling behavior of your iFrame from here.
To save the setting and to generate a shortcode, click on the Generate a shortcode for the current settings button.
Copy the generated code and paste it inside any page you wish to embed this iFrame.
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.
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.
[advanced_iframe use_shortcode_attributes_only="true" src="https://www.wpblog.com/" width="100%" height="600" id="advanced_iframe" ]
Let’s run a quick speed test of our WordPress site before and after using the WordPress iFrame using a plugin.
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.
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:
<iFrame src =”your_webpage_url”>
However, you may add additional parameters to achieve the desired width and height.
<iFrame src = “https://cloudways.com/ “ width= “100%” height=”300px” frameborder =”1” scrolling = “yes” align = “left”></iFrame>
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.
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!
Get WPblog’s ebook with tips & tricks to help you turn your WordPress site blazing fast. For free.
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!
Guess what happens when a website is slow? No one visits it. Loneliness creeps in and soon, no one remembers…
How to Speed Up a WordPress site? Great question, because while WordPress may be a great CMS, it tends to…
Before jumping on to building their own digital footprint, a majority of people go through dozens of websites, and the…
Before Facebook took the internet by storm in the late 2000s, Google Ads, known formerly as Google AdWords, was the…