The HTML <iframe> tag stands for Inline Frame. It is used to embed another HTML document (or website) inside your current webpage.
In simple words,
An HTML iframe works like a small “window” inside your web page that can display another webpage, video, map, or any external content.
Example Use Cases:
- Embedding YouTube videos
- Adding Google Maps
- Displaying ads, forms, or third-party widgets
Syntax
<iframe src="URL" title="description"></iframe>Example of Basic Iframe
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframe Example</title>
</head>
<body>
<h2>Basic Iframe Example</h2>
<iframe src="https://www.example.com" width="500" height="300" title="Example Website"></iframe>
</body>
</html>Note: If the embedded site blocks html iframes (using security headers), it won’t display. In that case, use content from trusted or same-origin websites.
Adding Border and Styling to Iframe
You can style an iframe just like any HTML element using CSS.
Example:
<style>
iframe {
border: 2px solid #4CAF50;
border-radius: 10px;
}
</style>
<iframe src="https://www.w3schools.com" width="600" height="350" title="W3Schools Iframe"></iframe>💡 Tip: Always add a title attribute it improves SEO and accessibility.
Iframe Without Border
If you don’t want any border around your iframe,
<iframe src="https://www.wikipedia.org" width="600" height="300" style="border:none;"></iframe>Embedding YouTube Video Using Iframe
You can easily embed YouTube videos on your website using <iframe>.
Example:
<h2>Embed YouTube Video</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>Explanation: The allowfullscreen attribute allows users to watch the video in full-screen mode.
Embedding Google Map Using Iframe
Example:
<h2>Embed Google Map</h2>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3600.116514015843!2d72.571365!3d23.022505!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395e84f26b63b8f1%3A0x6ec91c41d2a4e1e!2sAhmedabad!5e0!3m2!1sen!2sin!4v1692329322387"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>💡 Tip: Google Maps provides iframe code directly from its “Share – Embed a Map” option.
Responsive HTML Iframe (Mobile Friendly)
By default, iframes have a fixed size. You can make them responsive using CSS.
Example:
<style>
.responsive-iframe {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}
.responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="responsive-iframe">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" title="Responsive YouTube Video" allowfullscreen></iframe>
</div>💡 Tip: Always use a responsive design for better SEO and user experience.
Full HTML Iframe Example
<!DOCTYPE html>
<html>
<head>
<title>Complete HTML Iframe Example</title>
<style>
iframe {
border: 2px solid #4CAF50;
border-radius: 6px;
}
</style>
</head>
<body>
<h2>HTML Iframe Example</h2>
<p>The iframe below loads W3Schools homepage within this page.</p>
<iframe src="https://www.w3schools.com" width="700" height="400" title="W3Schools Homepage"></iframe>
</body>
</html>