WordPress iFrame – How to Embed Videos and Other Content in WP
What is WordPress iFrame? Let’s say you run a YouTube channel alongside your WordPress site, and wish to embed the videos you curate into your web pages. How exactly will you go about this? One of the best solutions is to embed WordPress iFrame to your site, manually or through a plugin.
Although, uploading the videos directly on your site may suffice, but there will be a problem. Storing videos in WordPress is inefficient. Videos are heavy files that consume a lot of server resources. Depending on your WordPress hosting plan, your site might suffer recurring downtime.
As part of our ongoing WordPress tutorials, in this post, we will be sharing with you the different techniques you can use to embed iFrame in WordPress.
iFrames are simple to use, and so you don’t have to be a web developer to add them. In this beginner’s guide, we will provide step-by-step instructions on how to embed content with iFrame. But before that, we will first explain in detail what WordPress iFrame is all about.
Content:
What Are iFrames All About?
Think of iFrame as a container that holds content from another website that you wish to share on yours. Simply put, to embed an iFrame is to add codes that let you share third-party content without violating copyright rules.
This content can take the form of posts and audio clips or visual content like pictures and videos. In addition to that, you can also use iFrame to embed Google Maps.
If you have ever embedded a video into an HTML document before, you sure would have come across codes that look like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/K1fXIMXDzjc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
This is an iFrame code. As you might have noticed, this is a link to a video on YouTube with predefined parameters such as autoplay, height, and width.
For example, here’s one of our videos on YouTube:
Depending on your specified parameters, when you embed the iFrame code of the video to your WordPress blog or site, here’s how it will look.
While we have only made references to videos so far, iFrames can be used to embed other types of content. That is to say, iFrames aren’t only used to embed videos to web pages.
For instance, you can also use iFrame to share content from a Facebook page to your webpage, just the same way you would with YouTube.
Here’s how an iFrame code from Facebook looks like:
<iframe src="https://web.facebook.com/plugins/post.php..&width=500" width="500" height="426" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
Why Are iFrames Useful?
First off, it is illegal to share someone else’s content on your website without their consent. This is considered a breach of copyright and is a punishable offense.
However, embedding content with iFrames isn’t considered illegal. As such, using WordPress iFrames won’t get you in trouble. But copying someone else’s content directly to your website will.
Another benefit, which we had earlier highlighted, is that using iFrames lessens the load on your server. Video contents are heavy, and uploading lots of them to your WordPress website will put stress on your webserver. The immediate result is slow loading. But with iFrames, you won’t have this kind of problem.
Lastly, with one iFrame, you can display different video content at once. This saves you the trouble of having to upload multiple videos to your website, which is not only strenuous but also ineffective.
The cool thing about iFrames codes is that they are easy to use and work well on all WordPress themes. Most drag and drop WordPress page builders like Elementor lets you insert iFrames at the click of a button.
Also, you don’t need a video player plugin to use on your website.
iFrames will be very useful if you run a web analytics company, a vlog (video blog), an e-Commerce website, etc.
With all that said, let’s now see the different techniques for embedding iFrames into a website.
How to Embed iFrames on WordPress
iFrames can be used on any website, regardless of the technology powering it. However, our focus in this article is WordPress. So if you haven’t done so already, install WordPress on your WordPress hosting account.
Here are some of the techniques for embedding iFrames to a WordPress website:
- Manually, by copying the iFrame code and pasting it to your website
- Using a plugin
Both techniques work pretty well. Besides, you don’t need to be a guru to use either of the two methods.
Adding iFrames Manually
To embed content from another platform to your WordPress site, all you have to do is to use the iFrame HTML tag in which you will indicate the source of the content.
Here is an example
<iframe src="website.com"></iframe>
For the embedded content to display, you will have to write the code into a page or a post like this:
First, go to Posts > Add New. Then click on the Plus icon to add a new block. Next, type ‘html’ in the search box and then select the HTML element.
Next, paste the iframe code into the HTML block.
If you use drag-and-drop WordPress page builders, you will just need to write the code into the iFrame block to embed videos or any other content you wish to.
For an embedded content to work as it should, certain parameters must be defined. For instance, here is the modified version of the iFrame HTML tag we had earlier written.
<iframe src="website.com" width="1024" height="615" allow="fullscreen"></iframe>
The parameters defined in the code are as follows:
- Width: 1024px
- Height: 615px
- Allow: This specifies if the iframe is permitted to display on fullscreen
So, if you will be writing your own iFrame code, it’s important you specify these parameters.
Oftentimes, WordPress users often experience errors with iFrame codes even when all parameters have been specified. This is because websites like YouTube and Facebook have a predefined standard for writing iFrames codes.
As such, it’s best to use their own embedded codes when looking to share content from their site to yours.
How to embed content from YouTube and Facebook to your website
In the next section, we will be talking about how to embed content from social media sites like YouTube and Facebook, to your website.
A quick note before we show you how to embed content from other sites. For embed codes to work, your domain configuration must match that of the site you are getting the code from.
By this we mean, if your site does not have an SSL certificate, that is site is HTTP, only codes from a site that uses HTTP will work as it should. The same goes for HTTPS sites with an SSL certificate.
How to Embed Videos from YouTube
We will be starting off with YouTube. First, you have to locate the video you wish to embed. As an example, we will be using our YouTube video tutorial we earlier screenshotted.
To fetch the embed code, click on the Share button.
Upon click, a popup box will appear. Click on Embed.
Next, copy the iframe code you see displayed on the screen.
Now head over to your website and paste the code you just copied. Ensure you paste with the “Text” editor tab selected if you are using the classic editor.
If you are using Gutenberg Visual Editors, add a ‘Custom HTML’ block and paste it into the code block.
You can paste it into a page, a post, or even your contact form if that is where you want it to appear.
This is the standard method for embedding videos from YouTube.
How to Embed Facebook Content with iFrame in WordPress
The method for sharing content from Facebook to a website is the same for YouTube. First, scroll through Facebook posts till you find the one you want to embed. Then click on the three vertical dot icon.
Next, click on Embed.
An iFrame code will be generated for you. Copy it and paste it to your webpage the same way you did for Youtube. And that’s it.
You can always adjust the width and height of the iFrame by using your own values. For instance, the width here has been set to 500px. You can change it to, say, 750px upon pasting it to your website. But you would need to ensure the width to height ratio is preserved by using an online tool like Red Route Image Resizing Calculator.
WordPress iFrame Plugins
First, note that we highly recommend adding embed codes without a WordPress plugin. It’s a simple process.
Nonetheless, you may decide to use WordPress plugins to shorten the process, or to add special features like popup iframe.
There are quite a number of plugins in the WordPress repository you can try your hands on. Let’s have a look at some of them.
Advanced iFrame Plugin
Advanced iFrame is one of the most popular iFrame plugins for WordPress. And just like the name suggests, it takes content embedding to a whole new level.
To get started with it, install and activate the plugin on your website.
The plugin comes with pre-configured settings that work quite well. But if you would like to change them, click on Advanced iFrame.
Then click on the Basic Settings tab. It’s here you can specify the URL to the content you want to embed, height, width, scroll or non-scroll, and other parameters for the embed iFrame feature.
When you are done, scroll up a little and click Generate a shortcode for the current settings.
Then click on the Update Settings button below.
Copy the generated shortcode and paste it into your editor.
With Advanced iFrame, you can modify the CSS of the embedded content, hide certain areas of the frame, add Javascript codes, etc.
iFrame
This embed plugin does exactly what its name suggests: embed iFrames right into your WordPress website. It allows text, picture, map, and video embedding, to name a few.
Like its predecessor, you specify display parameters, enable/disable scrolling, set transparency, and lots more. And it’s all free!
iFrame Popup
Wouldn’t it be nice if your iFrame embedded content appeared as a popup? Of course, it would, and with the iframe popup plugin, you can achieve just that.
It’s free, super responsive, and gives you room to customize your content just the way you want it.
Conclusion on WordPress iFrame
iFrame is a great option if you are looking to embed external content to your website without violating any copyright law.
If you run an online store, for instance, it can serve as a lead generation tool by embedding forms and marketing content.
One of the many benefits of using iFrames is that they help you conserve data resources. Let’s say you run a WooCommerce website that requires you to curate and publishing video ads all the time.
If you uploaded all the videos to your website media library, your WooCommerce hosting server will suffer the excess load.
The efficient way to go about this is to upload the videos to your YouTube channel, and then share them to your website using embedded iFrames.
We have shown you the two methods for embedding content to your site using iFrame: manually and with a WordPress iFrame plugin.
If you have questions, feel free to reach out to us.
More Resources:
