iFrame is an HTML tag used to embed interactive data such as videos, audio, and documents into a web page. It helps to display another site within a web page, allowing you to showcase content from different sites on a single site. Being a code structure of the HTML language, it offers compatibility with many web programming languages.

What is an iFrame?

iFrame, which stands for "inline frame," helps to display another website within a frame on your own site. In other words, it embeds another HTML document into your website. It shows web pages located in different places in frames on a single page. After being standardized with HTML 4.0, it began to be used with HTML 5.0.

What is the Purpose of Using an iFrame?

The purpose of using an iFrame is to display a web page from another location on your own website. You can display content such as YouTube videos, Twitter, and Facebook posts on your site. This allows visitors to your website to see the redirected content without leaving your page. In addition, it distributes the load created by content like videos to external sources.

iFrames, by their nature, do not pose a security threat. Their role is to display external source content that the developer wants to show on the website. It has advantages such as attracting the visitor's interest and keeping them on the site. On the other hand, it is also possible to embed malicious web page content into the site without the developer's knowledge. This security vulnerability, known as iFrame code injection, can redirect visitors to malicious sites, load viruses onto visitors' devices through a button in the iFrame, and lead to data theft.

How to Use an iFrame?

You can use iFrame code by wrapping the content from another site within the <iframe> tag. Basically, writing the URL that indicates the content source into the src attribute within the tag is sufficient. Below you can see an example of an iFrame code:

<iframe src="https://www.youtube.com/embed/-TGnwTelsO0?si=74tbRxWqp9MUFxuz"></iframe>

Besides src, there are attribute definitions that customize the frame such as setting its size, adding a scrollbar. Let's look at some of these definitions:

• name: Assigns a name to the frame. You can use this name in the CSS code of the web page.
• height: Determines the height of the frame. If no value is specified, the default value is 150 pixels.
• width: Determines the width of the frame. If no value is specified, the default value is 300 pixels.
• frameborder: Specifies the thickness of the frame border. The default value is 0, which means no border.
• allow: Specifies what the user is allowed to do with the embedded content, like “fullscreen, autoplay.”
• scrolling: Adds a scrollbar to the frame.
• loading: Specifies how the content should load. In some cases, if the embedded web page does not respond, the main web page does not open, which negatively affects both visitor behavior and SEO. If ""lazy"" is used, it loads the content after the site opens. If “eager” is written, it loads the content in the frame first when the site opens.
• align: Specifies the position of the frame on the page. Possible values are “middle, top, left, right, bottom.”

Below you can see an example of an iFrame code:

<iframe
width=""560""
height=""315""
src=""https://www.youtube.com/embed/-TGnwTelsO0?si=AAQeGSqWro0-JOsF""
title=""YouTube video player""
frameborder=""0""
allow=""accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share""
align=”middle”>
</iframe>