View video tutorial
HTML iFrame
HTML
<iframe>
is used to embed another html document to current one.
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 <iframe>
can be a part of your contents.
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>
<!-- Example: iframe element -->
<head>
<title>Page Title</title>
<style>
.d1{
border: 1px solid black;
border-radius: 5px;
padding: 5px;
margin-top: 10px;
width: 680px;
height: 480px;
}
.d2{
border: 1px solid rgb(19, 18, 18);
border-radius: 5px;
padding: 5px;
margin-top: 10px;
width: 680px;
height: 480px;
}
</style>
</head>
<body>
<h1>iframe example </h1>
<h1>Document in iframe</h1>
<div>
<iframe class="d2" src="index.jsp" title="Iframe Example"></iframe>
</div>
<h1>Media in iframe</h1>
<div>
<iframe class="d1" src="https://www.youtube.com/embed/RL4CyCvt6aw" allowfullscreen></iframe>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.