HTML Iframes

By /

Have you ever seen a YouTube video, Google Map, or another webpage shown inside a webpage? That can be done using an HTML <iframe>. An iframe creates a small window on your webpage where another webpage or online content can be displayed.

What is an <iframe> tag in HTML?

The <iframe> element is used to embed another webpage or online content inside your webpage. For example, you can embed a YouTube video on your website. The basic syntax is:

<iframe src="URL"></iframe>

The src tells the browser what content to load inside the iframe.

Embedding a YouTube Video

Let’s make a simple video page.

<!DOCTYPE html>
<html>
<head>
    <title>My Video Page</title>
</head>
<body>

    <h1>My Coding Video</h1>

    <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/VIDEO_ID">
    </iframe>

</body>
</html>

Output

My Coding Video

[YouTube video appears here]

The VIDEO_ID in this example is only a placeholder. To embed a real YouTube video, you need to use the video’s actual embed URL.

Understanding the Code

Look at this:

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

Here:

  • <iframe> starts the iframe.
  • </iframe> ends it.
  • src tells the browser what to display.
  • width controls the width.
  • height controls the height.

Changing the Iframe Size

You can change the width and height.

For example:

<iframe
    width="400"
    height="250"
    src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

Output

[Embedded content appears in a 400 × 250 area]

The larger the width and height, the larger the iframe appears on the page.

Embedding Another Webpage

An iframe can also display another webpage if that website allows itself to be embedded. For example:

<!DOCTYPE html>
<html>
<head>
    <title>Embedded Website</title>
</head>
<body>

    <h1>My Webpage</h1>

    <iframe
        width="600"
        height="400"
        src="https://example.com">
    </iframe>

</body>
</html>

Output

My Webpage

[Embedded webpage appears here]

Some websites do not allow iframe embedding for security reasons. In that case, the webpage will not appear inside the iframe.

Embedding a Google Map

Iframes are also commonly used to display maps. For example, a map provider can give you an embed code that looks similar to this:

<iframe
    src="YOUR_MAP_EMBED_URL"
    width="600"
    height="450">
</iframe>

Output

[Map appears here]

The actual map URL is normally copied from the map service’s Embed option.

Adding a Border

You can also give an iframe a border using the style attribute.

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Border</title>
</head>
<body>

    <h1>My Video</h1>

    <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        style="border: 2px solid black;">
    </iframe>

</body>
</html>

Output

My Video

[YouTube video inside a bordered box]

Here, style is being used to add a border. You’ll learn CSS properly later.

One Important Thing About Iframes

You cannot assume that every website can be displayed inside an iframe. Some websites block this feature for security reasons. So if an iframe doesn’t display a webpage, it doesn’t always mean your HTML is wrong.

Quick Recap

  • <iframe> displays external content inside a webpage.
  • src tells the iframe what to load.
  • width and height control its size.
  • Iframes are commonly used for videos, maps, and other embedded content.
  • Some websites don’t allow themselves to be embedded.
  • Always use trusted sources when embedding outside content.

Frequently Asked Questions (FAQs)

Q1. What is an iframe in HTML?

An HTML iframe is used to display another webpage or external content inside the current webpage.

Q2. What is the iframe tag in HTML?

The <iframe> tag creates a window on a webpage where external content can be displayed.

3. How do you embed a YouTube video in HTML?

You can use an <iframe> with the YouTube video’s embed URL in the src attribute.

Q4. Can I embed another webpage using an HTML iframe?

Yes, but the website must allow itself to be displayed inside an iframe. Some websites block iframe embedding.

Q5. What does the src attribute do in an iframe?

The src attribute tells the iframe which webpage or external content it should load.

Q6. How can I change the size of an HTML iframe?

You can use the width and height attributes to control the iframe’s size.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top