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

Understanding the term WordPress iFrame

WordPress iFrame is a feature by which you can embed content or HTML document of another website to your webpage content. These HTML documents can be external page URLs, images, infographics, or videos.

Generally, there are two reasons in which WordPress iFrame is implemented.

1. When you are supposed to share someone’s content on your own website. Although you can do this without iFrame it can create other issues such as copyright and legal issues. But, if you embed content using iFrame you do not need to face any such legal issues, and it is one of the best and safest methods of sharing third-party content than others. And another best part is, the code which is used in iFrame to embed content on your post will not be accessed directly. Which means it prohibits copying and sharing of the content further.
The second reason is you would use iFrames to share or embed large media files, such as high-quality images, videos, and audio.

2. The second reason you may want to incorporate iFrames is for sharing large files, such as Youtube videos, audio, or even images. The best part about it is, you do not need to host media on your WordPress media library to display content on your website. It is very important because these media files usually take up a great amount of space uses server space that lowers the website speed.

You can make it even easier if you are posting your videos on Youtube and then embed them in your content or Webpage with the help of iFrame. You can save a lot of server space and it is turned out to be a best practice to keep your website site without affecting its website speed.

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 too.

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, we have covered most of the areas of WordPress iFrames, Now it is time for you to know how you can add iframe to your website.

3 Methods to Add WordPres iframe on your Website

Since on various occasions you might need to use iframe on your Webpage, there are a lot of methods are available through which you can implement iframes. But for now, we will discuss the three most common methods by which you can easily add WordPress iFrames 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 doesn’t allow to embed their posts on any website. But it doesn’t mean that you are completely restricted to display 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 better 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 on your website. This Html snippet is consists of various iFrame specifications which 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 simply 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 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, in Facebook, Go 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 that 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 Intagram 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 are 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 contents too frequently, then you have the iFrame plugin.

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. And 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 the 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 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 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. iframe popup

This is the second most popular WordPress iFrame plugin in our list, that 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

1. Develop with lightweight Jquery Ext.
2. Popups are very responsive
3. Easy to customize
4. Timeout for open popups
5. 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 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. And click on Add new button to start.

iFrame popup Review and updates

We checked iFrame popup customer reviews on 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.

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 plugin 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

1. You can resize the iFrame with height and width of the content.
2. Hides the content before it loads completely
3. Hide aread of layouts
4. Security codes provided
5. Modify css styles and many more.

Pricing

Although, the advanced iframe is available free to install and use from the WordPress directory but with 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.

How do 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 setup 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,

1. Place ‘[advanced_iframe]’ in the editor directly or click on the “Add advanced iframe” button above the editor
2. 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.

1. However, there are certain things you need to keep in mind while embedding an iframe is that 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.

2. 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:

1. Height parameter let you customize the height of iFrame window in pixels.
2. Width parameter let you decide a particular width of the iFrame window in pixels.
3. Allow parameter let you give certain restriciton power over iFrame window. Such as Full screen viewing.

and many more.

To get 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. And you have permitted iframe to view in full screen. Now the WordPress iFrame code would look like this:

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.

1. Embedding codes directly to create a WordPress iFrame
2. Add iframes wtih the help of WordPress iframe plugins.
3. Manually Adding WordPress iFrames into 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 which you think we didn’t mention in the post. Please do let us know about it in the comment section below!

Frequently Asked Questions