HTML iframe tag
HTML
The <iframe> (inline frame) is used to embed another html document to current one.
The HTML iframe element is used to embed another HTML document within the current web page, creating a nested browsing context.
This allows us to display content from another source (such as video, maps, or another website) without the user leaving the current page.
Embedding Documents
➔ <iframe> embed internal or external contents into current document.
➔ An <iframe> can embed all sort's of media like YouTube and documents.
➔ Using too much <iframe> can slow down the site and <iframe> should use content only from trustworthy sites.
➔ It is not recommended to include <iframe> as an integral part of your website but
➔ Content in <iframe> from a suspicious websites can pose a security risk for the users.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML iframe tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mydiv {
border: 1px solid #d1d1d1;
background: #d5d5d515;
padding: 10px;
margin: 20px 0px;
}
</style>
</head>
<body>
<div class="mydiv">
<h3>HTML iframe tag example</h3>
<p>It is possible to embed any media sources, such as a YouTube video link, using the iframe tag.</p>
</div>
<h4>Document in iframe</h4>
<div>
<iframe class="d2" src="./index.jsp" title="Iframe Example"></iframe>
</div>
<h4>Youtube link in iframe</h4>
<div>
<iframe class="d1" src="resources/media/seaside.mp4" allowfullscreen></iframe>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.