learn2kode.in

Menu

HTML Tutorial

Menu

HTML – Iframe (Inline Frame)

The <iframe> (Inline Frame) tag in HTML is used to embed another web page inside the current page. It is commonly used to display external websites, maps, videos, or other HTML documents.

1. Basic Syntax

Copy Text 
<iframe src="page.html" title="Description"></iframe>

Attributes

2. Example – Simple Iframe

Copy Text 
<!DOCTYPE html>
<html>
  <head>
    <title>Iframe Example</title>
  </head>
  <body>
    <h2>HTML Iframe Example</h2>
    <iframe src="https://learn2kode.com" width="600" height="400" title="Learn2Kode Site"></iframe>
  </body>
</html>
  • src – Specifies the page or file to embed
  • title – Provides a description for accessibility

Output

 An embedded window showing Learn2Kode.com inside the page.

3. Setting Width and Height

You can control iframe size using attributes or CSS.

Copy Text 
<iframe src="demo.html" width="500" height="300"></iframe>

Using CSS:

Copy Text 
<iframe src="demo.html" style="width:500px; height:300px;"></iframe>

4. Removing the Border

Copy Text 
<iframe src="demo.html" style="border:none;"></iframe>

or

Copy Text 
<iframe src="demo.html" frameborder="0"></iframe>

5. Embedding External Websites

Copy Text 
<iframe src="https://www.wikipedia.org" width="800" height="400" title="Wikipedia"></iframe>

⚠️ Some websites prevent embedding for security reasons (using a setting called X-Frame-Options).

6. Embedding a YouTube Video

You can embed YouTube videos using the iframe embed code provided by YouTube.

Copy Text 
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"
  frameborder="0"
  allowfullscreen>
</iframe>

Output

A playable YouTube video inside your webpage.

7. Opening Links Inside an Iframe

You can target an iframe using the name attribute.

Example

Copy Text 
<iframe src="home.html" name="contentFrame" width="500" height="300"></iframe>

<a href="about.html" target="contentFrame">Open About Page</a>

Output

 When you click the link, about.html loads inside the iframe.

8. Iframe Attributes Summary

Attribute Description Example
src Specifies the file or URL to embed <iframe src="page.html">
width Sets width of the iframe <iframe width="600">
height Sets height of the iframe <iframe height="400">
title Describes the content for accessibility <iframe title="Info">
frameborder Adds or removes border (0 = no border) <iframe frameborder="0">
name Assigns a name for targeting links <iframe name="contentFrame">
allowfullscreen Enables full-screen mode (useful for videos) <iframe allowfullscreen>

💡 Tips

  • Always include the title attribute for accessibility.
  • Avoid embedding untrusted third-party sites (security risk).
  • Use responsive design (width:100%) for mobile-friendly iframes.
  • Prefer <iframe> instead of old <frameset> tags (deprecated).

Quick Example – Responsive Iframe

Copy Text 
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"
    allowfullscreen>
  </iframe>
</div>

Output

A responsive embedded YouTube video that fits any screen size.

HTML Meta tags