How to Embed WordPress iFrame With Or Without a Plugin
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 with or without a plugin!
Tabe of Content
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 website to be engaging, interactive, and look attractive. However, hosting all the videos and images in-house require 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 much 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 video 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.
Pros & Cons of Using an iFrame?
There are a few pros and cons to using WordPress iFrame, and being a webmaster you should be aware of both.
- 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.
- 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 WordPress iFrame now.
Embed WordPress iFrame With a Plugin
The easiest way to use iFrames with WordPress is via a 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 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 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:
<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 WordPress iFrame on your site or not!
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 to your 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!
Subscribe to Get a FREE WordPress Ebook Right in Your Inbox
WPblog provides the complete guide to launch your WordPress website completely FREE!