Iframes & Embeds

Sometimes you want to show part of another website inside your own page: a map to your shop, a YouTube video, a booking widget or a live code demo. The <iframe> element does this. It creates a small window in your page that holds a completely separate web page.

In this lesson you will learn to add iframes, embed videos and maps, size them for phones, and limit what an embedded page is allowed to do.

The iframe element

The name stands for inline frame. The src attribute gives the address of the page to show, and the frame appears where the element sits, like an image.

<iframe
  src="https://www.example.com/booking-widget"
  title="Table booking form for Farhan's Kitchen"
  width="600" height="400"
  loading="lazy">
</iframe>

• src is the page to load inside the frame.
• title describes the frame for screen reader users. When they reach an iframe, the title is what they hear, so it should say what the frame contains. Always add one.
• width and height set the size of the frame. Like images, setting them avoids the page jumping as it loads.
• loading="lazy" delays loading until the visitor scrolls near the frame. An embedded map or video can be heavy, so this is worth adding for any iframe that is not at the top of the page.

The content of the framed page is fully separate. Its CSS does not affect your page, and your CSS does not affect it.

Embedding a video or a map

Video sites and map services give you ready-made iframe code. On YouTube, open a video, choose Share, then Embed, and copy the code. On Google Maps, open a place, choose Share, then Embed a map. The code you get looks roughly like this (with a real video id):

<iframe
  width="560" height="315"
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="How to make filter coffee at home"
  allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
  referrerpolicy="strict-origin-when-cross-origin"
  loading="lazy">
</iframe>

A few tips when you paste embed code:

• Change the title. Embed code often has a generic title such as "YouTube video player". Replace it with what the video is about.
• Consider privacy. YouTube's embed dialog has a privacy-enhanced option, which uses the youtube-nocookie.com address shown above.
• Remove obsolete attributes. You may see frameborder="0" in pasted code. It is old HTML; use CSS border instead.
• Add loading="lazy" if it is missing and the frame is further down the page.

The allow attribute lists the browser features the embedded page may use, such as full screen or picture-in-picture. You will also see allowfullscreen in older code, which does the same job as listing fullscreen in allow.

Making iframes fit small screens

A fixed width="560" overflows a 360-pixel phone screen. The modern fix uses CSS aspect-ratio: let the frame take the full width of its container and keep a 16:9 shape for video.

iframe.video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

Keep the width and height attributes in the HTML as well; the CSS overrides them for display. You will learn more about this property in Sizing, Aspect Ratio & Overflow.

Writing the frame's content with srcdoc

Instead of loading a URL, the srcdoc attribute lets you write the frame's HTML directly. The browser treats it as a separate small page. This is handy for previews and demos, and it is the kind of separate, safe box that code playgrounds use to run examples.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>srcdoc</title>
  <style>
    iframe { border: 2px solid #94a3b8; }
  </style>
</head>
<body>
  <h1>Main page</h1>
  <p>The box below is a separate document inside this page.</p>
  <iframe
    title="Preview of a notice for Class 10 students"
    width="320" height="140"
    srcdoc="<h2>Notice</h2><p>Class 10 practical exams start on Monday.</p>">
  </iframe>
</body>
</html>

Because srcdoc is an attribute, its value is inside double quotes. Use single quotes, or the " entity from Comments & Character Entities, for any quotes inside it.

Keeping your site safe with sandbox

An embedded page from another site runs its own code. Usually that is fine for well-known services, but for anything you do not fully trust, add the sandbox attribute. An empty sandbox switches on every restriction: no scripts, no forms, no pop-ups, and the frame cannot navigate your main page. You then add back only what the frame needs, using keywords.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    iframe { border: 2px solid #94a3b8; margin-bottom: 8px; }
  </style>
</head>
<body>
  <p>Fully sandboxed (scripts blocked):</p>
  <iframe title="Sandboxed demo with scripts blocked" width="300" height="60" sandbox
    srcdoc="<p id='out'>Script did not run.</p><script>document.querySelector('#out').textContent = 'Script ran!';</script>">
  </iframe>
  <p>Sandbox with allow-scripts:</p>
  <iframe title="Sandboxed demo with scripts allowed" width="300" height="60" sandbox="allow-scripts"
    srcdoc="<p id='out'>Script did not run.</p><script>document.querySelector('#out').textContent = 'Script ran!';</script>">
  </iframe>
</body>
</html>

Both frames contain the same code. Only the second one is allowed to run its script.

When a site refuses to be framed

Try to embed your bank's website or a big social network in an iframe and you will usually see an empty box or an error message. That is deliberate. Websites can tell browsers not to show them inside frames on other sites, using HTTP headers called X-Frame-Options or the frame-ancestors rule of a Content Security Policy. This protects their users from tricks where a hidden frame captures their clicks.

You cannot get around this from your HTML, and you should not try. If a site does not offer embed code, give your visitors a normal link instead.

Common mistakes

• Leaving out title. Screen reader users hear only "frame" with no idea what is inside.
• Fixed widths that overflow phones. Use width: 100% with aspect-ratio in CSS.
• Loading many embeds at once. Every iframe loads a whole page. Use loading="lazy" and embed only what you need.
• Embedding untrusted content without sandbox. Add sandbox and allow only what is required.
• Trying to frame sites that block it. Use a link instead.

Key points

• <iframe> shows a separate web page inside your page; src sets the address.
• Always give an iframe a descriptive title, plus width, height and usually loading="lazy".
• Video and map services provide embed code; tidy its title and remove obsolete attributes.
• Make frames responsive with CSS width: 100% and aspect-ratio.
• srcdoc writes the frame's HTML directly; sandbox restricts what the framed page can do.
• Some sites block framing on purpose; link to them instead.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Kabir Cricket Academy</title>
  <style>
    .video { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
  </style>
</head>
<body>
  <h1>Kabir Cricket Academy</h1>
  <iframe class="video"
    width="560" height="315"
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
    title="Batting drill: playing the straight drive"
    allow="encrypted-media; picture-in-picture; fullscreen"
    loading="lazy">
  </iframe>
  <iframe
    title="Today's batch timings"
    width="300" height="120"
    sandbox
    srcdoc="<h3>Today's batches</h3><p>Morning 6 to 8 am, evening 4 to 6 pm.</p>">
  </iframe>
</body>
</html>