Mar 09, 2021
What is an iFrame
iFrame is short for Inline Frame. it’s a powerful element in web design. You have probably seen countless YouTube videos embedded on sites other than YouTube. An iFrame can insert all sort of media. And so you may be wondering how it was 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 things worth considering before you put an iFrame into your HTML document.
What is an iFrame
An iFrame is a frame within a frame. It is a component of an HTML element that allows you to embed documents, videos, and interactive media within a page. By doing this, you can display a secondary webpage on your main page.
The iFrame element allows you to include a piece of content from other sources. It can integrate the content anywhere within your page, without having to include them in your web layout’s structure, like a traditional element.
You shouldn’t use iFrame excessively though. 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.
Related: How to Embed Video in WordPress
How to Use iFrame
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>
The code above will display a YouTube tutorial video by Hostinger. Let’s examine each tag separately:
</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.
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.
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.