How to Embed A WordPress iframe? (Manually and with Plugin)

Why you should use WordPress iFrames and Why not?

Since we have already provided you with two general reasons, why WordPress iFreams is used. Although it helps to avoid hosting third-party media or HTML documents directly on your webpage, which will use up your server as well as storage space. Plus, no copyright or infringement issue, and even if the original content is updated or changed, it will also be updated in the iFrame.

But, apart from its benefits, there are some disadvantages associated with iFrames too.

1. Not all websites will let you use their content via iFrame.

2. There would be a high chance that the content might be too small or too large for your webpage. And you will need to fix it manually.

3. Another disadvantage of WordPress iFrame is that websites on HTTPS can only use content from other HTTPS sites. Similarly, an HTTP site can only use content from another HTTP site.

This is the main reason why many CMS platforms such as WordPress prefer to use oEmbed to embed media into your WordPress webpage or content. You do not need to resize it manually, it will automatically fit according to the space available on the webpage.

However, one thing you must note is that WordPress does not allow iFrame for social media, such as Facebook or Twitter. To embed social and Twitter posts on your WordPress site, you will be required to use social media plugins.

Now, that we have covered most of the areas of WordPress iFrames, it is time for you to know how you can add iframe to your website.

1. Embedding codes directly to create an iFrame

Due to certain restrictions imposed by popular websites, sometimes you might find it difficult to embed content from these websites manually. For example, social media websites, such as Facebook don’t allow to embed their posts on any website. But it doesn’t mean that you are completely restricted from displaying their content on your website.

Instead, all you need to do is simply find out the necessary embed codes. Let us take the example of YouTube to understand this more comprehensively.

First of all, open Youtube and go to the video you like to embed, whether it is your video or from any other channel. On every YouTube video, you will find a share button lying just underneath it, as shown in the picture below:

Click on the share button, and a pop-up window will appear immediately, displaying all the available options to share. Among the various options, you will also find “Embed“.

The moment you click on the Embed option, an HTML snippet will appear from where you can use it to add WordPress iFrame to your website. This HTML snippet consists of various iFrame specifications that you can consider. However, you can also neglect all the iframe specifications and simply copy the source URL instead.

Now, you can use the above embed code on your webpage and the video will show in an iframe. Rather than showing you some errors while putting a simple standard URL.

But how you can embed this HTML snippet in your post? All you need to do is to open your post or page and choose block editor. In the block editor you will have an option to use an HTML block as shown in the picture below:

However, if you use Classic editor, in that case, you need to select text editor and paste the HTML code you have copied from YouTube.

Now you can check the results by clicking on the preview button and you will find something like this:

Similarly, you can also embed any social media post on your website. For example, on Facebook, Go to the post you would like to share, and click on the three dots for open options as shown in the picture below:

Now various options will be displayed on your screen, choose the embed option as shown in the picture below:

When you click on the Embed option, a pop-up window will appear and it will display an HTML snippet just like you have seen earlier in the YouTube videos. Just like we have already said even a source URL can be enough, however, you can also use the parameters as well:

Paste this code wherever you like on your webpage and the Facebook post will start displaying without any problem.

Similarly, many popular social media websites such as Instagram and LinkedIn also provide this feature to share their posts on various websites. And you can easily find the embed option in the settings option of that particular post.

2. Adding WordPress iFrame to the website with the help of WordPress plugin

Like always, many WordPress users are not code-friendly and even are lazy enough to use the long path. Keeping this general issue in mind, many developers are always working their best to bring an easy path such as embedding iframes with the help of WordPress plugins.

There are plenty of options available out there if you are going to use a WordPress plugin to embed iFrames. But generally, two options are widely used especially if you’re looking to embed content from another website to yours.

If you used to embed external content too frequently, then you have the iFrame plugin.

2.1. iFrame plugin

With the help of this plugin, it will let you embed iframes on your website using shortcodes. And add these shortcodes directly to your post without worrying about dealing with pages and codes directly. It is one of the best alternatives to iframes HTML tags because WordPress has removed this feature due to security reasons. It will become easier for you to embed external content from popular websites such as YouTube, Vimeo, and Slideshare.

However, one thing you must note is that you won’t be able to embed posts from HTTP webpages to HTTPS webpages and vice versa.

Pricing:

an iFrame WordPress plugin is an open-source plugin and is available free to use and download from the WordPress directory.

How do the installation and setup of the iFrame plugin look like?

Installation and setup of the iFrame plugin are the same as you install any WordPress plugin from the WordPress directory. All you need to do is to go to your WordPress dashboard > Plugins > Add new > search “iFrame” > Install > Activate.

After successfully activating the plugin, you can now move on to your post and you will find a Simple iframe tool as shown in the picture below:

iFrame Review and updates

We checked iFrame customer reviews on the WordPress Directory and have been pushing and found the following results for its latest version, 4.5.

• It has 100,000 + active installations right now.
• For us, it shows that it was updated 6 days ago. [ regularly updating ]
• It has been currently tested up to WordPress 5.8.2.
• According to the WordPress Directory, its average rating is  4.5/5. 45 users out of 54 gave it 5 stars.

2.2. iframe popup

This is the second most popular WordPress iFrame plugin in our list, which is available free and incorporates iframe embeds into WordPress websites. This WordPress iframe plugin is developed with a light extension that helps to display iframes inside popup windows. The popup windows can be customized as per the need and it provides responsive popups.

Some key features of iframe popup

• Develop with lightweight Jquery Ext.
• Popups are very responsive
• Easy to customize
• Timeout for open popups
• Configures once per session

Pricing

Like other WordPress iframe plugins in our list, it is also an open-source plugin and is available free to download and use.

How do the installation and setup of the iFrame popup plugin look like?

Just like the previous WordPress iframe plugin, the installation and setup process is almost the same. The only difference is in the plugin configuration. After successfully downloading and activating the iFrame popup plugin, you can configure the iframe popup plugin settings in the Settings section of the left side of the WordPress dashboard. Click on the Add New button to start.

iFrame popup Review and updates

We checked iFrame popup customer reviews on the WordPress Directory and have been pushing and found the following results for its latest version, 3.2.

• It has 1000 + active installations right now.
• For us, it shows that it was updated 4 months ago. [ regularly updating ]
• It has been currently tested up to WordPress 5.8.2.
• According to the WordPress Directory, its average rating is  3.5/5. 3 users out of 6 gave it 5 stars.

2.3. Advanced iFrame

Advanced iFrame is another popular WordPress iFrame plugin that lets you add iFrames to your website using shortcodes. But what makes this different from other WordPress iFrames plugins is its security codes that help to restrict other users from embedding iFrames without your approval. Let us check out what more things it can do.

Some key features of Advanced iFrame

• You can resize the iFrame with the height and width of the content.
• Hides the content before it loads completely
• Hide area of layouts
• Security codes provided
• Modify CSS styles and many more.

Pricing

Although, the advanced iframe is available free to install and use from the WordPress directory with has certain limited features. However, its free features are enough to do the job, but if you want a complete package you can upgrade to the Advanced iFrame Pro version at $19 for 6 months.

What does the installation and setup process of Advanced iFrame look like?

Apart from plugin configuration settings, there is nothing new in the process of installing and setting up the Advanced iFrame plugin. The whole process was similar to any typical WordPress plugin. Just go to WordPress dashboard > Plugins > Add new > Install > Activate.

Now here comes the Plugin configuration part,

• Place ‘[advanced_iframe]’ in the editor directly or click on the “Add advanced iframe” button above the editor
• Configure your iframe at your dashboard side menu -> “Advanced iFrame pro” and you are ready to go.

Now you will be provided with the above settings.

We checked iFrame popup customer reviews on WordPress Directory and have been pushing and found the following results for its latest version, 2021.9

• It has 70,000 + active installations right now.
• For us, it shows that it was updated 2 months ago. [ regularly updating ]
• It has been currently tested up to WordPress 5.8.2.
• According to the WordPress Directory, its average rating is  4.3/5. 36 users out of 45 gave it 5 stars.

3. Manually Adding WordPress iframes into the WordPress

One of the very fundamental steps to add simple code for the WordPress iframe is to close and open the codes with HTML tags and embed whichever URL you would like to.

<iframe src="anywebsiteURL.com"></iframe>

• However, there are certain things you need to keep in mind while embedding an iframe: the source URL must use the Same HTTP as yours. I.e if the source URL uses “HTTP” your website must be also on “HTTP” and vice versa.
• Another thing you must keep in mind is that some popular websites such as YouTube and Facebook do not allow manual WordPress iframe embedding. If still, you try to embed it will display an error message on your website window.

However, if you can use this manual method, then is also important to keep in mind that you have also an option to customize your iFrames so that they can easily fit and be compatible with your webpage standards. This is the main reason why WordPress iFrames come with certain parameters through which you will be able to customize. For example:

• The height parameter lets you customize the height of the iFrame window in pixels.
• The width parameter lets you decide a particular width of the iFrame window in pixels.
• Allow parameter lets you give certain restriction power over the iFrame window. Such as Full-screen viewing.

and many more.

To make things more clear, let us understand this with an example. Suppose you want to customize an iFrame as per your webpage standards, and you choose window size to be 500 pixels width whereas,200 pixels height. You have permitted the iframe to be viewed in full screen. Now the WordPress iFrame code would look like this:

<iframe src="anywebsite.com" width="500" height="200" allow="fullscreen"></iframe>

However, there are a lot of other parameters you can also consider, but for your better understanding, we choose only some basic ones.

Summary

Ensuring no harm of performance issues on your website as well as following all the lawful methods. WordPress iFrames are one of the best and legal methods to share others’ content on your website. In addition to it, you will also be able to display informative and engaging videos or infographics on your website without hosting them on your server.

So to avail of this feature, we have discussed three common methods to use WordPress iframe on your WordPress website.

• Embedding codes directly to create a WordPress iFrame
• Add iframes with the help of WordPress iframe plugins.
• Manually Adding WordPress iFrames to your Website.

We hope this post will help you answer all your questions in a detailed and comprehensive way. However, if you have any questions to ask or would like to add more points to it that you think we didn’t mention in the post. Please do let us know about it in the comment section below!

Frequently Asked Questions