How to Create Iframes in HTML? Complete Guide

HTML iframes are used to embed third party contents such as images, maps, videos, social media feeds or a complete website to a current website.

Varun Saharawat30 Oct, 2025

Iframes can be pretty cool at times as they present a separate window of your webpage into another. Are you diving in confusion while creating iframes for your web page? Well using an iframe HTML tag can be a bit frustrating at the start especially when you are a beginner.

It is important to be aware that iframes can embed a part of your web page, maps, videos, images, etc but they might not be supported in every browser. In this blog we will learn how to use iframes in web development.

What are iFrames?

HTML iframes are tags used to embed external content or documents from one web page like images, videos, maps, or an entire web page to another web page document. It is represented by <iframe> tag and is enclosed by the URL of the external content to be embedded.

HTML iframes Key Takeaways

Iframes are HTML tags used to embed videos, maps, or entire web pages from another website to the current website.
iframes are represented using <iframe></iframe> tag.
HTML iframes contain URL attribute and title attribute by default.

Also, Learn More about HTML tags in Web Development

HTML iFrames Syntax

The iframe syntax consists of “src” attribute and “title” by default. Check the representation below.

The src attribute is used to specify the URL of the content you want to embed in the current web page project. The title attribute in iframes are used to specify the title given to the embedded document. You can also enclose a description inside of the title attribute.

HTML iframes Examples

Let us understand the implementation of iframes HTML tag with the help of an example below.

Iframe Example Code

Check the implementation of the iframe tag below. We have integrated style elements with src, title, and loading attributes in our iframe tag.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Iframe Example</title> <style> iframe { width: 100%; height: 500px; border: 2px solid #ccc; border-radius: 8px; } </style> </head> <body> <h1>Embedding Wikepedia Using Iframe</h1> <iframe src="https://www.wikipedia.org/" title="OpenAI Website" allowfullscreen loading="lazy"> </iframe> <p> The above iframe embeds the Wikepedia website within this page. You can adjust the width, height, and other attributes as needed. </p> </body> </html>

In the HTML document, we have to select a position where we want to embed our iframe tag. Now use <iframe> opening tag and insert attributes to select the sizing, loading speed, link url, and others in the iframe elements, Close the </iframe> element tag when you have used all the attributes properly. On your web page, you will see a separate window of iframe embedded with the homepage of the link you provided. Let us know what other attributes we can use in our HTML iframes tag.

Attributes Supported by iFrame HTML tags

HTML iframe supports various attributes to enhance the interactivity and responsiveness of the HTML web page. Check some of the major attributes used with the iframe html tags below.

Attribute	Description
src	Specifies the URL of the page to embed.
srcdoc	Provides the HTML content to display inside the iframe directly, instead of loading it from an external source.
name	Assign a name to the iframe, which can be targeted by links or scripts.
allow	Specifies a feature policy for the iframe, allowing or denying certain browser features.
title	Provides an accessible name for the iframe, improving accessibility for screen readers.
width	Sets the width of the frame.
height	Sets the height of the iframe.
style	Allows inline CSS to style the iframe, including size adjustments and other visual properties.
seamless	Intended to make the iframe appear seamless with the parent document.
sandbox	Enables an extra set of restrictions for the content in the iframe. Can control actions like script execution, form submission, and more
allowfullscreen	Allows the iframe content to be displayed in fullscreen mode.
referrerpolicy	Specifies how much referrer information should be included with requests.
frameborder	Specifies whether or not to display a border around the iframe.
marginwidth	Sets the width of the left and right margins.
marginheight	Sets the height of the top and bottom margins.
scrolling	Controls the display of scrollbars (e.g., yes, no, auto).
loading	Specifies the loading behavior of the iframe. Possible values: lazy, eager, auto.
srcset	Not Applicable: Primarily used for <img> tags to specify multiple image sources. Not applicable to iframes.
longdesc	Specifies a URL to a detailed description of the iframe's content.
allowpaymentrequest	Allows the iframe to make payment requests.
allowtransparency	Non-Standard: Allows the iframe to render with a transparent background. Better handled via CSS.

Setting Width and Height in iframe HTML tags

We can give a customised dimension to our iframe using the width and height attributes. The default unit is pixels.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Iframe Example</title> <style> iframe { border: 2px solid #ccc; border-radius: 8px; } </style> </head> <body> <h1>Embedding Wikepedia Using Iframe</h1> <iframe src="https://www.wikipedia.org/" title="OpenAI Website" allowfullscreen loading="lazy"> width = 100px; height = 200x; </iframe> <p> The above iframe embeds the Wikepedia website within this page. You can adjust the width, height, and other attributes as needed. </p> </body> </html>

Output

How to Remove Default Borders from HTML iframes?

HTML iframes have borders embedded around the frame. You can remove these borders with the help of the style attribute by setting the “border” value to “none”.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Iframe Example</title> <style> iframe { width: 500px; Height:500px; border: 2px solid #ccc; border-radius: 8px; } </style> </head> <body> <h1>Embedding Wikepedia Using Iframe</h1> <iframe src="https://www.wikipedia.org/" title="OpenAI Website" allowfullscreen loading="lazy" style = "border:none" > </iframe> <p> The above iframe embeds the Wikepedia website within this page. You can adjust the width, height, and other attributes as needed. </p> </body> </html>

With Border

Without Border

How to make HTML iframes Responsive?

We can make our iframe element responsive by enclosing it within a container element tag i,e. <div> tag and adjusting its aspect ratio. Every device size has an aspect ratio. For example, the youtube aspect ratio is 16:9 universally. Other popular aspect ratios are 4:3, 3:2, 8:5, and 1:1. Let us follow the steps below to make our iframe responsive.

Step 1: Enclose the <iframe> under a container element i,e. <div>.

<div class = “iframe”> <iframe class = “responsive_iframe”> src="https://www.wikipedia.org/" title="OpenAI Website" allowfullscreen loading="lazy"> </iframe> </div>

Step 2: You have to adjust the “padding-top” to maintain the size of the iframe window even when the device size changes. Apply CSS accordingly using a specific position, overflow, and padding as per the size.

.iframe{ position: relative; overflow: hidden; width: 100%; padding-top: 75%; } .responsive_iframe { position: absolute; top: 0; left:0; bottom: 0; right: 0; width: 100%; height: 100%; }

You can also try the other aspect ratio for your iframe as per your device dimension. To make it responsive, set the aspect ratio using padding-top.

Learn Full Stack Web Development with PW Skills

If you want to build a career in web development, then enroll in our 6 months Full Stack Web Development Course. This program is specially curated for beginners and professionals. Start your learning from scratch, master advanced tools and web development frameworks, and work on real world projects. This job assistance program will help you prepare for job roles in web development such as full stack developer, front end developer, and backend developer. Hurry, enrol at pwskills.com

Our Social Channels

🔥 Trending Blogs

HTML iframes FAQs

Q1. What are HTML iframes?

Ans: HTML iframes are html tag elements used to embed a video, map, or complete website into the current website.

Q2. What is the use of HTML iframes?

Ans: HTML iframes are used to present content of a website or a complete website in independent windows or subwindows on the current website. Google maps are frequently integrated using iframes.

Q3. Are HTML iframes still used?

Ans: Yes, HTML iframes are still used to embed third party content into a website, such as maps, videos, images, post feeds, etc.

Q4. What are the benefits of iframes?

Ans: iframes are used to enhance the layout of a website by adding interactive fixed elements within a page. It is widely used to add chat bot support or google maps on a web page.