HTML iframe Explained - Embedding External Content

Previous Next

Have you ever seen a YouTube video embedded inside an article? Or a Google Map shown directly on a Contact page? All of that is done with one tag called <iframe> - short for Inline Frame.

Think of it as a window in the wall of your room. You are in your room (your page), but through that window you see a view from a completely different place (another site). That is exactly what an <iframe> does.

Basic Syntax

The <iframe> tag is very simple - you provide the external content URL and set the frame size:

<iframe
    src="https://www.example.com"
    width="800"
    height="450"
    title="Embedded content description">
</iframe>

src: URL of the external content you want to embed.
width and height: frame dimensions in pixels.
title: text description of the embedded content - required for accessibility and SEO.

Most Common Example: Embedding a YouTube Video

YouTube provides an <iframe> embed code for every video. Go to any video -> Share -> Embed. You will get code similar to this:

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Learn HTML from scratch"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

Notice that YouTube uses youtube.com/embed/... instead of the normal video URL. This is required - the regular URL will not work inside an <iframe>.

Another Example: Embedding Google Maps

Go to Google Maps -> search for a place -> Share -> Embed a map -> copy the code. You will get something like this:

<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
    title="Our office location on the map">
</iframe>

All Important Attributes

Attribute	What It Does
`src`	URL of the content to embed - required
`width` / `height`	Frame size in pixels or percent
`title`	Description for search engines and screen readers - very important
`allowfullscreen`	Allows the user to open the content in full screen
`loading="lazy"`	Delays loading until the user scrolls near it - speeds up the page
`frameborder="0"`	Removes the visible iframe border (deprecated but still common)
`sandbox`	Restricts what the embedded content can do - increases security

Important Security Note

<iframe> is powerful but needs security awareness. Here is what you should know:

Do not embed unknown sites: Code inside the iframe runs in the visitor's browser. A malicious site might try to steal data.
Some sites block embedding: Many sites (like Google, Facebook) prevent being displayed in an iframe using a security header called X-Frame-Options. You will see a blank frame or an error.
Use sandbox for protection: When embedding content you do not fully trust, add the sandbox attribute to restrict permissions.

<!-- iframe protected with sandbox -->
<iframe
    src="https://example.com"
    sandbox="allow-scripts allow-same-origin"
    title="Protected external content">
</iframe>

Full Practical Example: Contact Page

Here is a professional Contact page with an embedded Google Map and contact info:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact DevArabi</title>
</head>
<body>

    <h1>Contact Us</h1>

    <p>We are happy to hear from you. You can visit us at the following location:</p>

    <!-- Embedded Google Map -->
    <iframe
        src="https://www.google.com/maps/embed?pb=..."
        width="100%"
        height="400"
        style="border:0;"
        allowfullscreen=""
        loading="lazy"
        title="DevArabi office location">
    </iframe>

    <address>
        <p>Address: King Fahd Street, Riyadh, Saudi Arabia</p>
        <p>Email: <a href="mailto:info@devarabi.com">info@devarabi.com</a></p>
    </address>

</body>
</html>

Frequently Asked Questions - FAQ

Why does the iframe show blank or an error?

The site you are trying to embed blocks being shown inside an iframe. This is a decision by the site owners for security. You cannot bypass it. The solution is to use a normal link instead of embedding.

Can I make the iframe full width?

Yes. Use width="100%" and set height with CSS. This is very useful for different screen sizes.

Does iframe affect page speed?

Yes - each iframe adds an extra HTTP request and loads a full page. The solution is to always add loading="lazy". This delays loading until the user scrolls near that part of the page.

Why does YouTube give me an /embed/ URL instead of the normal one?

The normal YouTube page includes the full interface (menus, comments, recommendations...). The /embed/ URL gives only the video player, which is lightweight and perfect for embedding.

Great! You have now mastered how to embed external content in your page. In the next lesson, we will learn entities - how to write special symbols and characters in HTML like © and <.