iFrame allows you to embed video, images, and content from other websites on your web page. With the help of iFrame, you can show the content from the different websites on your one without actually hosting it on your website’s server; the content will directly load from the original server to your website.
To embed the content in iFrame, you need to put a tiny HTML code with a source link on your website where you want to show the particular content in iFrame. It may sound technical if you are a newbie, but using iFrame is super easy.
In this article, I have explained everything with step-by-step instructions about how to embed an iFrame in WordPress. In WordPress, you can use iFrame in a few different ways, including:
- iFrame with customized HTML code
- Using the sources embed code
- iFrame with Plugin
All the ways are easy, but I suggest you go with the first two methods as you don’t need to install any additional plugins for it.
And before starting with embedding an iFrame in WordPress, let’s first understand why you should use iFrame instead of copy-pasting the things from the source website.
Why Should You Use an iFrame?
I have seen many people asking for the benefits of iFrame when they can easily copy-paste content from other websites or upload images and videos directly to their server.
Here is why you should use iFrame.
1. Does Not Put Any Load On Your Server Resources
When you embed any content, videos, or images using iFrame on your website, it will not consume your server resources because the embedded content will be directly loaded from the source server.
WordPress will first load your web page and then process the iFrame code to fetch content directly from the source URL, and you will see it on your website. The embedded content on your website will automatically update if the original content gets updated.
2. Save You From DMCA and Copyright Notices
It is illegal to copy-paste other’s content or upload images or videos of any other creators on your website without asking them or paying them. But, with iFrame, the same thing becomes completely legal.
As in iFrame, you are embedding the content, which will load from the original source URL. You don’t need to worry about DMCA and Copyright notices; embedding means you indirectly link to their website, giving them credit.
This is why you should use iFrame to embed content in WordPress rather than copy-pasting others’ content.
Different Ways to Embed an iFrame in WordPress
You can embed iFrame in WordPress in a few different ways.
Below I have explained all the ways with step-by-step instructions and proper images so that you can easily follow the instructions to be done with it.
1. Creating the Custom iFrame Code and Embedding in WordPress
It is super easy to create iFrame code. Here is what the iFrame code looks like:
<iframe src="URL goes here"></iframe>
You need to replace the “URL goes here” with the URL of the content you want to embed, and then wherever you add this code to your website, the content on the URL will start showing.
The above is the basic iFrame code. You can customize the code to change the design of embedded content by adding attributes to the code. Here are a few attributes you can use.
- Width and Height: Using those attributes, you can set the fixed size for the iFrame windows.
- Frameborder: By adding this attribute to the code, you can show the border to your iFrame window.
- Align: You can control the alignment of the iFrame windows by using this attribute.
- Scrolling: Allows you to enable or disable scrolling.
After adding all those attributes, here is how the fully customized iFrame code will look like:
<iframe width="560" height="315" src="URL goes here" title="Title for embedded content" frameborder="0" allow="fullscreen" alight:"center" Scrolling:"no"></iframe>
Now it’s time to embed this code into your WordPress website. Follow the below instructions carefully to be done with it.
First of all, login to your WordPress website >> Go to Post/Page >> then click on the “+” icon at the top and search for the HTML block >> Now Paste the Code in the HTML block, then click on Publish/Update button.
If you are still using the old Classic editor, you can paste the iFrame code directly into the post.
That’s how easy it is to add iFrame to your WordPress.
2. Use the Source’s Embed Code to Add iFrame in WordPress
Many big websites and video hosting platforms provide ready-made iFrame code so you can easily embed their content into your WordPress posts and pages. Here is how you can use the source’s embed code to embed iFrame in WordPress.
One of the famous websites, you can better say video hosting platform, that provides the ready-made iFrame code is YouTube. Let’s understand how to use the source embed code to add an iFrame in WordPress by taking YouTube as an example.
Follow the below instructions carefully:
As I am taking YouTube as an example, first go to YouTube.com and search for the video you want to embed on your WordPress website. Below the video, you will get the Share button. Click on it >> Then click on Embed, as shown in the image below.
After clicking on Embed, you will get the embed code, copy the code, and now you need to paste it into the WordPress website.
Here is how you can do it.
First, login to your WordPress website >> Go to Post/Pages >> Search for the HTML block by clicking on the “+” icon at the top >> Paste the copied code in the HTML block >> Finally, click on Publish/Update.
It is easy to use the source’s embed code to add iFrame in WordPress.
3. Embedding iFrame in WordPress With Plugin
A few different plugins allow you to embed iFrame in WordPress. Here for this tutorial, I am using iframe by webvitaly, a free-to-use plugin. Follow the below instructions carefully to embed iFrame in WordPress using a plugin.
At the very first, you need to login to your WordPress website >> Scroll down, hover on Plugin and click on Add New >> Search for iframe by webvitaly >> Click on Install and then Activate the Plugin.
Once you activate the plugin, it will start working automatically; no setup is needed. Now you can embed iFrame in WordPress using this code:
[iframe src="URL goes here"]
You must replace the “URL goes here” with the source URL.
Now to add this code to your website, go to Post/Page >> Search for the Shortcode block >> And then add the above-shared shortcode with the source URL in the shortcode field >> Click on Publish/Update.
You are done.
This is how you can embed iFrame in WordPress using a plugin.
Final Words
This is how you can embed an iFrame in WordPress. Above, I have shared different ways to embed an iFrame in WordPress, but I suggest you go with the first two methods because using iFrame with code is not too tricky; that is why I think it is not worth installing another plugin for it.
Remember one thing, iFrame only works with websites that are using a similar protocol, which means if your site uses HTTPS, then you can embed the content of the HTTPS website only, and if your website is using HTTP, then you can embed content only from the HTTP protocol website.
I have seen many people searching for this issue when trying to embed content from a website of a different protocol. Hope this blog post about how to embed an iFrame in WordPress is helpful to you.
