You might have come across websites that use embedded YouTube videos or sites that use embedded Google Maps. An iframe-based code is used to embed a YouTube video or a google map.
What is an iframe?
We use an iframe to embed a webpage or other web resource inside another web page.
Let’s see how to use iframe in HTML with examples.
index.html
<!DOCTYPE html>
<html>
<head>
<title>iframe example</title>
<style>
h1{
font-family: sans-serif;
color: brown;
}
p{
margin-right: 65%;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque viverra iaculis placerat. Aliquam urna diam,
mollis sit amet elit et, posuere mattis ipsum.
</p>
<iframe src="iframe_example.html" title="Embedded webpage" width="500" height="250"></iframe>
</body>
</html>
iframe_example.html
<!DOCTYPE html>
<html>
<head>
<title>Embedded web page</title>
<style>
h1{
font-family: sans-serif;
color: rgb(10, 138, 160);
}
</style>
</head>
<body>
<h1>Embedded web page</h1>
<p>
Curabitur quis quam gravida, dapibus lacus at, dapibus elit.
Nam non finibus velit. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia
curae; Vivamus convallis dolor id neque ultrices bibendum.
Suspendisse potenti. In blandit, lorem a feugiat condimentum,
elit orci vestibulum felis, a lobortis est sem ullamcorper
ipsum. Morbi tincidunt mauris orci, id varius est lacinia vitae.
Phasellus viverra tempor mi eu semper.
</p>
</body>
</html>
In this example, I have used iframe to embed iframe_example.html inside index.html.
Output :
Now, let’s see an example of embedding an external webpage. In this example, I will embed the DeveloperXon.com home page inside index.html.
index.html
<!DOCTYPE html>
<html>
<head>
<title>iframe example</title>
<style>
h1{
font-family: sans-serif;
color: rgb(67, 209, 237);
}
p{
margin-right: 65%;
}
</style>
</head>
<body>
<h1>DeveloperXon.com</h1>
<p>DeveloperXon provides you tutorials on Web and mobile development.
</p>
<iframe src="https://developerxon.com/" width="800" height="500"></iframe>
</body>
</html>
Here, I have embedded the DeveloperXon.com home page inside index.html.
Output :
If you don’t want to show the border around the iframe, then you can remove the border using the CSS border property.
Let’s modify our first example to add the CSS border property.
<!DOCTYPE html>
<html>
<head>
<title>iframe example</title>
<style>
h1{
font-family: sans-serif;
color: brown;
}
p{
margin-right: 65%;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque viverra iaculis placerat. Aliquam urna diam,
mollis sit amet elit et, posuere mattis ipsum.
</p>
<iframe style="border: none;" src="iframe_example.html" title="Embedded webpage" width="500" height="250"></iframe>
</body>
</html>
Here, I applied CSS border property to remove the border around the iframe.
Output :
DeveloperXon 
Leave a Reply