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.
| <iframe src = “content URL” title = “description” > </iframe> |
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
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.
