What is iFrame and why use it?
As you know, iFrame will allow you to add videos or any content on your site without hosting the content. That means the actual content is loaded from the source.
If you use iFrame to embed any content you want into your site, you can save storage space and bandwidth. Besides that, using iFrame is the best way to help you avoid piracy from other content on the Internet. Moreover, whenever the original content has any change, it will be updated in the iFrame automatically. So, the content on your site won’t be outdated. For more information, you can read why you should embed videos in WordPress here.
Nowadays, many big platforms such as Youtube provide you with the iframe code to embed to your site. However, if you want to use the content from smaller websites that don’t offer iFrame code, the blog today will help you solve the issue. Now, let’s explore 3 ways to add iFrame Code to WordPress!
The methods to Add iFrame Code to WordPress
Utilizing the Source’s Embed Code
Nowadays, many big websites have available embed code for their content. All you need to do is copy and paste the code to your site. For example, if you want to add the iFrame code of a video on Youtube, let’s follow the steps below.
First of all, you need to click on the Share button under the video you want to add to your site.
After that, a share popup will appear for you to select the share options. Simply press on Embed button.
Youtube will give you the iFrame code. Then, you can decide whether to show player controls and enable privacy-enhanced mode. We suggest that you should turn on the 2 options.
In the next step, you just need to click on the Copy button to get the iFrame code.
Now, let’s go back to the admin dashboard. So, you can add the code to any post or page you want.
In our example, we will embed the code on a new page. Thus, go ahead Page -> Add new.
If you are using block editor, then click on the plus icon to add a new block. After that, simply search for HTML block.
Next, all you need to do is paste the iFrame code you copied before into the block. Don’t forget to Publish/ Update your page to save your changes.
In case you choose to use Classic editor – one of the most popular WordPress Editor Plugins instead of the default editor, simply go to the Text box to add the code.
Of course, you need to Publish/Update the content you have just added.
Now, let’s visit the front-end page to see the result here.
Using a plugin
If you desire to add any content from any source without fearing because the source doesn’t contain an embed code, then you can use a plugin to do that.
First of all, let’s install and activate iFrame which is one of the most useful WordPress iFrame Plugins. You can follow some simple steps to install a WordPress plugin here.
After activating, the plugin will work without any setting requirements. Therefore, let’s generate a new post/ page or edit the available post/page.
If you utilize the Classic Editor, simply switch to the Text box and add the shortcode below. On the other hand, if you use the block editor, let’s add a new block and search for a shortcode block. Then, add the following shortcode:
[iframe src="URL example"]
Change the URL example into the URL of the content you wish to add to your site. For instance, we would like to add a song from SoundCloud, so we will get the link from the content and add it to the shortcode. Let’s see the example in the image below.
Don’t forget to save your content by clicking on the Publish/Update button.
Next, let’s check the result on your site now!
Generating the iFrame code to add content manually
Besides the two ways above, you can also add iFrame code to WordPress manually. All you need to do is insert the following code to any post or page you want:
<iframe src="URL example"></iframe>
Replace the URL example with the URL of the content you need to add to your post/page.
For the block editor, let’s select HTML block and embed the code. For the Classic editor, simply go to the Text tab and add the code. After that, don’t forget to Update/Publish the post or page. Everything is done.
In case you want to edit the width or height of the iFrame, you just need to add the code below:
<iframe src="URL goes here" width="600" height="300"></iframe>
You can alter the width and the height as you want.
Finally, let’s see what we have on the site.
Final thoughts
In conclusion, we hope that you are effectively able to add iFrame code to WordPress thanks to the blog today. Do you have any questions to ask us? Don’t hesitate to leave your comment below, so we can answer you as soon as possible. If you believe the blog is wonderful, let’s share it with your friend. Last but not least, don’t forget to visit our responsive and attractive Free WordPress Themes here.
- Taking Inspiration From One of the World’s Leading Eyewear Ecommerce Sites: Eyebuydirect - March 22, 2024
- Navigating Success: The Role of UX/UI Agencies in Business Growth - March 12, 2024
- 4+ Best Woocommerce Private Store Plugins - March 8, 2024
Recent Comments