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>
Try it Now »

Click on the "Try it Now" button to see how it works.