Runnable HTML Docs: iframe Tag

Q: What is an iframe in HTML?

An (inline frame) is a box that displays a separate web page inside the current one. It has its own document, styles and scripts, which is why it is used for embeds like videos, maps, ads and code previews.

Q: Why does my iframe say the site refused to connect?

The site sends an X-Frame-Options or Content-Security-Policy: frame-ancestors header that forbids other sites from framing it. Many sites do this to prevent clickjacking. You cannot override it from your page; use the site's official embed URL if it has one.

Q: How do I remove the border of an iframe?

Set border: 0 in CSS. The old frameborder="0" attribute is obsolete, although many copied embed codes still include it.

Q: How do I make an iframe responsive?

Give it width: 100% and an aspect-ratio in CSS, for example aspect-ratio: 16 / 9 for video, and leave out a fixed height. The iframe then scales with its container and keeps its shape.

Q: What does the sandbox attribute do on an iframe?

An empty sandbox attribute blocks scripts, form submission, popups and more inside the frame, and treats its content as coming from a unique origin. You then allow only what the embed needs with keywords such as allow-scripts or allow-forms.

How to use an iframe

An <iframe> displays another page inside yours. Give it the page's address in src, a title that describes it, and a size:

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

The frame loads the page as a separate document, with its own styles and scripts. The examples on this page use srcdoc instead of src, which puts the frame's HTML right in the attribute, so they work without loading another site:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

The outer paragraph is blue and bold; the paragraph inside the frame is not, although the same p rule is on the page. Styles never cross the frame boundary, in either direction. The default border and the 300×150 default size come from the browser; the width and height attributes override the size.

Embed a YouTube video or a map

Video sites and map services give you ready-made iframe code. On YouTube, press Share, then Embed:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

For Google Maps, open the place, press Share, then Embed a map, and copy the iframe the same way. Keep the title (screen readers announce it when entering the frame) and replace fixed sizes with the responsive CSS below. The allow attribute grants the frame features such as autoplay or fullscreen that are off by default for embedded pages.

Size, border and responsive iframes

Copied embed codes use fixed pixel sizes, which overflow on phones. width: 100% plus aspect-ratio makes the frame fill its container and keep its shape, and border: 0 removes the default inset border:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

Change max-width: 480px to another value and the frame keeps its 16:9 shape at every width. Remove border: 0 to see the browser's default border. The old frameborder, scrolling and marginheight attributes are obsolete; use CSS.

sandbox: limit what the frame can do

A frame can run scripts, submit forms and open popups like any page. The sandbox attribute takes those powers away; an empty sandbox blocks nearly everything, and each keyword gives one back. Both frames below get the same HTML with a small script:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

The first frame keeps its placeholder text because its script never runs (Chrome's console logs a "Blocked script execution" message for it). Use sandbox whenever you frame content you do not fully trust, such as user-written HTML, and add only the keywords it needs:

Keyword	Allows
`allow-scripts`	Running JavaScript
`allow-forms`	Submitting forms
`allow-popups`	`window.open` and `target="_blank"` links
`allow-modals`	`alert()`, `confirm()` and `prompt()`
`allow-same-origin`	Treating the content as its real origin (cookies, storage)
`allow-top-navigation`	Navigating the whole tab away from your page

Never combine allow-scripts and allow-same-origin for content from your own origin: the framed script could then remove its own sandbox.

Talking to a frame: postMessage

The outer page and the frame are separate documents. When their origins differ they cannot touch each other's DOM, but they can send messages. Type a message and send it into the frame:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

In real code, pass the frame's exact origin (such as 'https://maps.example.com') instead of '*', and check e.origin in the receiver, so messages only go to and come from the site you expect.

Performance and when a site refuses

Lazy loading. Add loading="lazy" to frames far down the page; the browser loads them only when the reader scrolls near them. Each iframe is a full page load, so a page with many embeds gets slow without it.
"Refused to connect". Many sites (banks, most social networks, Google search) send an X-Frame-Options or frame-ancestors header that forbids framing, and the browser shows an error in the frame. Your page cannot override it. Use the site's official embed URL, or a link.
Accessibility. Always set title. It is how a screen reader names the frame, and a page with several untitled frames is hard to move around in.

Common mistakes

A missing title. Screen readers announce the frame as unnamed.
Fixed widths from copied embed code. Replace them with width: 100% and aspect-ratio.
Framing a normal video file. For your own .mp4 file, use the video element; iframes are for pages.
Trusting framed content. Add sandbox for anything you did not write.
Expecting outer CSS to style the frame. Style the framed page from inside it.

Frequently Asked Questions

What is an iframe in HTML?

An <iframe> (inline frame) is a box that displays a separate web page inside the current one. It has its own document, styles and scripts, which is why it is used for embeds like videos, maps, ads and code previews.

How do I embed a YouTube video with an iframe?

On YouTube, choose Share, then Embed, and copy the code. It is an iframe whose src is https://www.youtube.com/embed/ plus the video id. Keep the title and allowfullscreen attributes, and use CSS aspect-ratio: 16 / 9 with width: 100% to make it responsive.

Why does my iframe say the site refused to connect?

The site sends an X-Frame-Options or Content-Security-Policy: frame-ancestors header that forbids other sites from framing it. Many sites do this to prevent clickjacking. You cannot override it from your page; use the site's official embed URL if it has one.

How do I remove the border of an iframe?

Set border: 0 in CSS. The old frameborder="0" attribute is obsolete, although many copied embed codes still include it.

How do I make an iframe responsive?

Give it width: 100% and an aspect-ratio in CSS, for example aspect-ratio: 16 / 9 for video, and leave out a fixed height. The iframe then scales with its container and keeps its shape.

What does the sandbox attribute do on an iframe?

An empty sandbox attribute blocks scripts, form submission, popups and more inside the frame, and treats its content as coming from a unique origin. You then allow only what the embed needs with keywords such as allow-scripts or allow-forms.

Related concepts