What is an iframe in HTML? – HTML inline frame

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 :

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: