What Is an iFrame?
An inline frame (iFrame) is an element that loads another HTML element inside of a web page. They are commonly used to embed specific content like external ads, videos, tags, or other interactive elements into the page.
So, you may be wondering how it’s done. Chances are the web designer put an iFrame element within that page.
In this article, we will take a closer look at iFrame and how to use it, and talk about other factors worth considering before you put an iFrame into your HTML document.
Download glossary for web beginners
How to Use iFrame
You shouldn’t use iFrame excessively. It can slow down your page and pose a security risk, especially if you use content from a suspicious website. Think about an iFrame as a part of your content, but not part of your site. For example, if you want to add a YouTube video to stimulate your readers, then you can insert an iFrame element to that post.
Now you know that iFrame is an additional element to share content from other sites. You can add it to give context about a certain topic to the readers. You can insert an iFrame element by using the <iframe> tag in an HTML document. Copy the code below and paste it to notepad, and save the file as .html format:
<iframe src="https://www.youtube.com/embed/dXBohfjc4WA" width="680" height="480" allowfullscreen></iframe>
![Iframe Example](/tutorials/wp-content/uploads/sites/2/2018/12/iframe-example-youtube-code.jpg)
The code above will display a YouTube tutorial video by Hostinger. Let’s examine each tag separately:
- The
<iframe>
…</iframe>
tag is used to contain the video within the iFrame. - The iFrame source
(src)
is the origin of the content from the external or internal server. Don’t forget to put the embedded code in the URL. - Width and height is the aspect ratio of the iFrame. You can insert a fixed sizes such as 680×480 pixels (px) as in the example. Or, you can use a percentage (10%-100%) based method to adjust the iFrame automatically.
Suggested Reading
How to Embed iFrame Into WordPress
How to Embed Video in WordPress
Security Threats of Using iFrame
By nature, the iFrame element does not pose any security risk for your web page or your readers. Partly, it was developed to help content makers add visually engaging material to the readers. Nevertheless, you need to pay attention when adding an iFrame from an untrusted site website.
There was a surge of iFrame code injection on some legitimate websites, such as ABC news, in 2008. This type of attack redirects visitors to a malicious site, which will then install a virus to the visitors’ PC or attempt to steal sensitive information. That is why it is not recommended to include iFrame as an integral part of your website.
If you think that a website is not safe, don’t even bother to link it and don’t put its content in your iFrame element.
![Hostinger web hosting banner](https://www.hostinger.com/tutorials/wp-content/uploads/sites/2/2023/11/Web-hosting_in-text-banner.png)
Conclusion
All in all, iFrame is a powerful element if you want more engagement for your visitors. Think of iFrame as part of the content that you make, not as an integral part of your website. You shouldn’t use iFrame excessively though; it is better if you can develop your site without iFrame. If you still need to use it for development purposes, remember only to use content from a trustworthy site. We hope that this article helps you on implementing and understanding iFrame.
Comments
September 04 2022
Hi! I'm not sure if you can help me with this issue but I've looked everywhere for an answer and haven't found anything. I am trying to use an iframe with my Elementor WordPress site and even though the iframe shows up fine on my live site, I can't edit the page in Elementor as the majority of it is blacked out. Have you ever heard of this issue before or know where I should look to find an answer?
September 09 2022
Hey there! If Elementor page appears blank while trying to edit, the first thing that we would suggest is disabling plugins one by one to see if they're conflicting with Elementor. If issue persists, we would suggest reaching out to a developer or a hosting provider for further help. As an alternative, you can also try restoring a backup of a website from when you were able to edit the pages properly ?