iframe not working

When an iframe is not working, the usual reason is that the other site refused to be displayed inside your page, and no attribute on your side can override that.

Open the console and read the message. It names which of four separate problems you have, and they share no fix between them.

The four causes

Work top down. The first row cannot be argued with, so establish whether you are in it before touching anything else.

Test whether the site allows framing

Ten seconds, no tools. Copy the src URL and open it in a new browser tab.

If it loads in the tab and refuses in your frame, the site is sending an anti framing header. That is a deliberate protection against clickjacking, standard for banking, mail and most logged-in applications.

You have three honest options:

1. Link to it instead of framing it. A plain <a href="..." target="_blank"> always works.
2. Use the provider's embed URL. Video and map services publish a separate framing friendly address, usually containing /embed/.
3. Ask the site owner to add your domain to their frame-ancestors list, which is only realistic for services you control.

There is no allow-framing attribute. If a search result offers one, it does not exist.

Height: the frame that looks empty but is not

An iframe is a replaced element with a default size of roughly 300 by 150 pixels. It does not grow to fit its content.

So a long page inside an unsized frame appears as a narrow strip, which reads as broken.

iframe {
  width: 100%;
  height: 600px;
  border: 0;
}

For video and other fixed ratio content, use the ratio instead of a pixel height:

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

Automatic height matching is only possible when the framed page is same origin or cooperates by posting its height. A cross origin frame will not tell you how tall it is, and that is part of the same isolation rule.

The sandbox attribute doing exactly what you asked

sandbox with no value is the most restrictive setting there is. It removes scripts, forms, popups, and same origin privileges all at once.

<iframe src="report.html" sandbox></iframe>

That frame will render markup and run nothing. Add back only what the content needs:

<iframe src="report.html" sandbox="allow-scripts allow-same-origin"></iframe>

The sandbox attribute lists every token and what it permits. Note that allow-scripts together with allow-same-origin for content from another origin effectively removes the sandbox, so use both only for content you control.

If scripts inside the frame are silent, missing allow-scripts is the first thing to check.

Local files: the frame that works online and not on disk

Opening the parent page by double click puts it on the file protocol, where each file is its own origin.

What that costs you inside frames:

• Scripts in the framed document may be blocked.
• The parent cannot read into the frame even for files in the same folder.
• fetch from inside the frame fails on CORS grounds.

Serving the page removes all three. Drop the file into the HTML file opener to see the difference without setting anything up.

When srcdoc is the better tool

If the content you want inside the frame is markup you already have, you do not need a second file at all.

<iframe srcdoc="&lt;p&gt;Rendered inside the frame&lt;/p&gt;"></iframe>

srcdoc puts the document inline, which removes path problems, 404s and the file protocol issue in one move. The quoting is fiddly, since the markup has to be escaped, but there is nothing left to go missing.

Checklist before you conclude the frame is broken

• Does the URL load in its own tab?
• Are both parent and frame on https?
• Does the frame have a height rule?
• Is there a sandbox attribute, and does it include what the content needs?
• Is the address bar showing file://?
• Is there an /embed/ variant of the URL published by the provider?

Five of those six are on your side of the line. The first one is not, and it is the one that most often turns out to be the answer.

Sharing a page that contains frames

Frames make a page harder to send as a file, because each frame is another path that has to resolve wherever the file lands.

Paste the page into a NOS document and it is served from one address, so relative frame sources resolve normally and file protocol restrictions do not apply. Turning HTML into a link is that step.

Sites that refuse framing still refuse it. That decision travels with them, not with your page. See iframe for what the element is and is not meant to do.