Currently Empty: ₹0.00
HTML Iframe
HTML CODES & EXAMPLES
HTML Iframe
Learn how to embed webpages, videos, maps and other online content inside a webpage using the HTML iframe element.
01
What is HTML Iframe?
Introduction to the iframe element
The HTML <iframe> element allows another
webpage or embeddable resource to be displayed inside the
current webpage.
Important:
The external website must allow embedding. Some websites
intentionally block iframe embedding for security reasons.
02
Basic Iframe
Basic webpage embedding
basic-iframe.html
<iframe
src="https://example.com"
width="800"
height="500"
>
</iframe>
03
Iframe Width and Height
Control the iframe dimensions
iframe-size.html
<iframe
src="page.html"
width="1000"
height="600"
>
</iframe>
04
Iframe Title
Improve accessibility with a descriptive title
iframe-title.html
<iframe
src="lesson.html"
title="Computer Fundamentals Lesson"
width="100%"
height="500"
>
</iframe>
05
Remove Iframe Border
Create a cleaner embedded layout
iframe-border.html
<iframe
src="page.html"
style="
border:0;
width:100%;
height:500px;
"
>
</iframe>
06
Responsive Iframe
Make embedded content responsive
responsive-iframe.html
<style>
.responsive-frame{
width:100%;
height:500px;
border:0;
}
</style>
<iframe
class="responsive-frame"
src="page.html"
title="Embedded Page"
>
</iframe>
07
Embed YouTube Video
Add an online video to your webpage
youtube-iframe.html
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video"
allowfullscreen
>
</iframe>
08
Responsive YouTube Video
Professional video embed layout
responsive-youtube.html
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Educational Video"
allowfullscreen
>
</iframe>
</div>
<style>
.video-container{
position:relative;
width:100%;
aspect-ratio:16 / 9;
}
.video-container iframe{
width:100%;
height:100%;
border:0;
}
</style>
09
google-map.html
<iframe
src="YOUR_GOOGLE_MAP_EMBED_URL"
width="100%"
height="450"
style="border:0;"
loading="lazy"
allowfullscreen
title="Institute Location"
>
</iframe>
10
Map Card
Create a professional location section
map-card.html
<div class="map-card">
<div class="map-header">
<span>📍</span>
<div>
<h3>Our Location</h3>
<p>Visit our institute</p>
</div>
</div>
<iframe
src="YOUR_GOOGLE_MAP_EMBED_URL"
loading="lazy"
title="Institute Location"
>
</iframe>
</div>
<style>
.map-card{
overflow:hidden;
border-radius:18px;
background:#fff;
border:1px solid #e2e9f1;
}
.map-header{
display:flex;
gap:12px;
align-items:center;
padding:18px;
}
.map-header span{
font-size:25px;
}
.map-header h3{
margin:0 0 4px;
}
.map-header p{
margin:0;
color:#68788c;
}
.map-card iframe{
display:block;
width:100%;
height:400px;
border:0;
}
</style>
11
Lazy Loading
Load iframe content when appropriate
iframe-lazy.html
<iframe
src="lesson.html"
loading="lazy"
width="100%"
height="500"
title="Online Lesson"
>
</iframe>
12
Iframe Sandbox
Restrict capabilities of embedded content
iframe-sandbox.html
<iframe
src="lesson.html"
sandbox
width="100%"
height="500"
title="Sandboxed Content"
>
</iframe>
⚠️ The sandbox attribute can restrict scripts, forms,
downloads and other capabilities. Add permissions only when
they are actually required.
13
Iframe Permissions
Use the allow attribute for supported features
iframe-allow.html
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="Educational Video"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
14
Iframe Alternative Link
Give users a direct link as an alternative
iframe-link.html
<iframe
src="lesson.html"
width="100%"
height="500"
title="Online Lesson"
>
</iframe>
<p>
<a
href="lesson.html"
target="_blank"
rel="noopener"
>
Open Lesson in New Tab
</a>
</p>
15
Professional Embed Card
Educational website iframe layout
embed-card.html
<div class="embed-card">
<div class="embed-header">
<div class="embed-icon">
🌐
</div>
<div>
<h3>
Online Learning Resource
</h3>
<p>
Embedded educational content
</p>
</div>
</div>
<iframe
src="lesson.html"
title="Learning Resource"
loading="lazy"
>
</iframe>
</div>
<style>
.embed-card{
overflow:hidden;
border-radius:18px;
background:#fff;
border:1px solid #e2e9f1;
box-shadow:
0 12px 30px rgba(20,50,90,.08);
}
.embed-header{
display:flex;
align-items:center;
gap:14px;
padding:18px;
}
.embed-icon{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:#eaf4ff;
font-size:22px;
}
.embed-header h3{
margin:0 0 4px;
}
.embed-header p{
margin:0;
color:#718096;
font-size:13px;
}
.embed-card iframe{
display:block;
width:100%;
height:450px;
border:0;
}
</style>
16
Important Iframe Attributes
Quick reference
Attribute
Purpose
Example
src
Specifies embedded resource
src=”page.html”
title
Describes the iframe
title=”Lesson”
width
Sets iframe width
width=”800″
height
Sets iframe height
height=”500″
loading
Controls loading behavior
loading=”lazy”
sandbox
Restricts embedded content
sandbox
allow
Controls permitted features
allow=”…”
allowfullscreen
Allows fullscreen where supported
allowfullscreen
17
Live HTML Iframe Runner
Run and preview an iframe example
LIVE PREVIEW
18
Practice Task
Test your HTML Iframe skills
🎯 Create an Embedded Learning Page
Create a professional educational webpage that embeds external learning resources.
- Add an embedded webpage.
- Add a YouTube educational video.
- Add a responsive iframe.
- Add a Google Map section.
- Add a descriptive iframe title.
- Use lazy loading where appropriate.
- Add a direct fallback link.
- Make the complete layout mobile responsive.