Are you looking for ways to embed an iFrame code in any of your WordPress posts or Page?
The IFrame is an awesome feature of WordPress that allows you to embed a video or other content on your website without uploading it.
Lots of third-party platforms like YouTube, Instagram, etc lets you make use of iFrame to embed content from them.
So let’s get down to business as we show you how to embed iFrame code in WordPress using multiple methods.
- What is iFrame?
- Why Use iFrames?
- 1. Make Use of the Source’s Embed Code to Add iFrame in WordPress
- 2. Using the iFrame WordPress Plugin to Embed an iFrame
- 3. Manually Creating the iFrame Code and Embedding in WordPress
What is iFrame?
This is a feature, that allows you to embed videos or other content on your website. Meaning that with Iframe you can display videos on your WordPress website without having to upload them to your website.
The Iframe is more like a window on your site to display external content.
The actual content would be loaded from the source from which it was embedded.
To add an iframe to your posts or pages, you need to copy and paste a special HTML code to your post. It May sound strange to you but we will guide you through gradually.
Why Use iFrames?
One of the main reasons ok using iFrames is to avoid uploading videos or other resources on your site that will consume your bandwidth and storage space.
Another reason is that iFrame protects you against copyright issues.
With iFrame, if the original content is changed, it will automatically be updated in the iFrame on your website too.
In as much as using iFrames is pretty cool, there are some drawbacks to it. Not all website allows you to put their videos or other content into an iFrame.
Also, there are tendencies that the iframe would be too big or small for your page, which means you will have to adjust it manually.
Another setback is that only HTTPS sites can make use of iFrames from other HTTPS websites. The same goes for sites with HTTP.
This is the reason why lots of platforms like WordPress prefers using oEmbed. With oEmbed, you can use it to embed videos including some other types of content by easily pasting a URL to your WordPress post or Page. When the URL is posted, the content will automatically resize itself to the right size for both desktop and mobile devices.
Note: oEmbed for Facebook and Instagram posts, isn’t supported on WordPress.
However, there is an alternative to iFrames like using a social feed plugin.
Smash Balloon is a WordPress plugin that we highly recommend. It will help display content from Twitter, Instagram, Facebook, and Youtube.
That being said, let’s begin to go through the three different ways to add iFrames to your WordPress website easily.
1. Make Use of the Source’s Embed Code to Add iFrame in WordPress
Lots of large websites out there have an Embed option on their content. This presents you with a special iFrame code that is needed to be added to your site.
On YoutTube, the code can be gotten by going over to the YouTube videos and then clicking the share button below it.
After clicking the share button, there will be a popup with different share options. All you need to do is click on the Embed option as shown in the screenshot below.
Now, the iFrame code will be display for you to copy. By default, YouTube automatically adds the player controls. It is recommended that you enable the privacy-enhanced mode. That you can now copy the code by clicking on the copy button.
The copied code can now be pasted into any of your posts or pages on your website. For the sake of this tutorial, we will be adding an iframe to a new page for you to understand better,
In other to create a new page, go to Pages » Add New in your WordPress Admin panel.
Then go to blocks and add an HTML block to your page.
Paste the iframe code which you copied from YouTube into the block.
You can now preview or publish your page to display the YouTube content that was embedded.
Just in case you are making use of the old classic editor, you will still be able to add iFrame code. All you need to do is click on the Text tab on the editor and paste the iFrame code.
2. Using the iFrame WordPress Plugin to Embed an iFrame
This is yet another useful method that lets you create an iframe to embed content from any source even though no embed code was provided.
To do this, you need to install and activate a plugin called iFrame.
After activating the plugin it will begin to work straight away without you setting up anything. All you need to do is proceed to add or edit a post or page. Then, from the blocks add a shortcode block.
After that, you can use the shortcode below to enter your iFrame code.
|[iframe src=”URL goes here”]|
Simply replace where you see “URL goes here” with the URL of the content you wish to embed on your website. For the purpose of this tutorial, we are going to be embedding a Google map.
Just so you know, using the embed option to get the direct URL of the content may be needed. You ought to make use of just the URL and not the whole of the embed code.
After that, you can now preview or publish your post, and it should display a Google map embedded on your Website.
Alternatively, You can add parameters to the iframe shortcode in order to customize how the content displays.
For example, maybe you want to set the width and height, and then remove a scroll or border. You can simple more details on how to go about the on the iFrame plugin’s page
Note that if you make use of the old classic editor, you can easily paste the shortcode into your post or page without switching to Text view.
3. Manually Creating the iFrame Code and Embedding in WordPress
If you are not a fan of using the iFrame plugin, this is another option for you. You can create the iFrame code by yourself manually.
In other to do this, simply add an HTML block in the WordPress content editor.
Firstly, simply paste the code below into your HTML block.
|<iframe src=”URL goes here”></iframe>|
Where you see “URL goes here” simply replace it with the URL of the video or content you would like to embed.
Simply replace where you see “URL goes here” with the direct URL for the content that you are trying to embed. All you need is just the URL.
In the screenshot below we are embedding google Maps.
Some extra parameters can be added to the HTML tag. For example, you can customize the width and height of your iFrame.
Just as we have in the code below/ Making our iFrame display 600 pixels wide and 300 pixels high
|<iframe src=”URL goes here” width=”600″ height=”300″></iframe>|
This comes in very handy especially if you need to restrict the embedded content to a smaller space.
We hope this article was helpful and know you know how to easily embed iFrame code in WordPress.
Feel free to also Check out the 7 Best WordPress Testimonial Plugins as you may find them useful to you.