What Is an Iframe?

An iframe is an HTML element that embeds another web page inside your page, in a self-contained frame. MDN defines it as a nested browsing context, embedding another document into the current one (MDN). You meet iframes every day. An embedded YouTube video, a Google Map, a payment form, and a chat widget all load through one.

How does an iframe work?

An iframe loads a second web page from another URL and shows it in a box on yours. The two pages stay separate, each with its own content and code, even though they share the screen.

You add one with an <iframe> tag and a src address pointing at the page to embed. The browser fetches that page and renders it inside the frame.

Because the embedded page is a full page of its own, it brings its own weight and its own scripts along with it.

What are iframes used for?

Iframes let you drop a feature built elsewhere into your site without rebuilding it. Most third-party widgets a business uses are iframes underneath.

• A YouTube or Vimeo video player.
• A Google Map showing your shop location.
• A payment or booking form hosted by the provider.
• A live chat or WhatsApp widget.
• An embedded social media post.

Common embed	What it adds	Loaded from
YouTube or Vimeo	A video player	The video platform
Google Maps	An interactive map	Google
Payment or booking form	A checkout or calendar	The provider
Live chat widget	A chat window	The chat service

Embedding the provider's own page means their code, not yours, handles the hard parts, such as playing video or taking a card payment.

Do iframes slow a page down?

Iframes can slow a page, because each one loads a whole extra web page with its own files. A single video or map embed can pull in more code than the rest of your page combined.

Google's web.dev guidance measured that lazy loading the YouTube embed can save approximately 500 KB on the initial page load (web.dev).

Two habits keep them light. Load them only when they are needed, and avoid stacking several heavy embeds on one screen, which drags your Core Web Vitals.

The loading="lazy" attribute, per MDN, defers an iframe until it nears the visible area. An embed far down the page then does not delay the first view. This is the same idea as lazy loading an image.

In our experience auditing Malaysian sites for China access, a blank Google Maps embed is one of the failures that turns up. The map's iframe loads from a Google domain that visitors inside China cannot reach, so the frame simply stays empty.

Are iframes safe?

Iframes are safe when you embed only pages you trust and control what each embed is allowed to do. The risk runs both ways: a page you embed, and other sites embedding yours.

For pages you embed, the sandbox attribute, per MDN, lets you restrict what the embedded page can do, from running scripts to opening pop-ups. You grant only the permissions the widget genuinely needs.

The other direction is clickjacking. MDN describes such an attack as one where an attacker tricks the user into interacting with a target site in a way that they didn't intend (MDN). The trick often hides a real page inside an invisible frame set over a decoy button.

To stop other sites from framing yours, two response headers help. The X-Frame-Options header tells a browser whether your page may be shown in a frame (MDN). The newer Content-Security-Policy frame-ancestors directive names which sites may embed you (MDN), and MDN points to it as the more comprehensive option. MDN calls frame-ancestors the replacement for X-Frame-Options and advises sending both, so older browsers stay covered.

Frequently asked questions

Can I embed any website in an iframe?

No, because many sites block being framed. A site can use the X-Frame-Options header or a frame-ancestors rule to refuse embedding, usually to prevent clickjacking. Providers that want to be embedded, such as YouTube or Google Maps, give you a ready embed code. A site that has not offered one may show a blank frame or an error instead. Always use the provider's own embed option rather than framing a random page.

Are iframes bad for SEO?

Mostly no, with one caveat. Google says its systems try to associate the sub-page's content as a part of the primary page for indexing, but it's not guaranteed (Google SEO office hours, December 2023). The reason is that the framed page is a normal page of its own. So use iframes for features like video, maps, and forms, and keep your own important text as real content on the page. A YouTube embed is fine; hiding your main copy inside a frame is not.

What is the difference between an iframe and an embed?

The difference is small in everyday use. An iframe loads a full external web page in a frame, while the older <embed> and <object> tags plug in specific content like PDFs or media. In practice, "embed" is the general verb and the iframe is the element most modern widgets rely on. When a provider hands you "embed code", it is usually an iframe tag.

Should I use an iframe for my contact form?

Only when another service hosts the form. A form built into your own site does not need an iframe; you place the fields directly on the page. You reach for an iframe when a third party hosts the form, such as a booking or payment provider that gives you a frame to drop in. For a plain contact form, a native form wired to your inbox or a CRM is simpler and lighter.

How do I make an iframe responsive?

Wrap it in a container and let it scale with the page width. A raw iframe has a fixed width and height, which breaks the layout on a phone. A common fix sizes the frame to its container, so a video keeps its shape on any screen. Most builders and video platforms already output responsive embed code, so check the provider's setting before writing your own.

Embedding features without the weight

Storming Solutions builds custom-coded websites for Malaysian businesses from Kuala Lumpur, maintains existing sites, and runs SEO, AEO, and GEO. Choosing what to embed, and how, is part of a clean build. We would rather add a map or a video a visitor barely waits for than let three heavy widgets stall the page.

Not sure whether a widget belongs on the page or is quietly dragging it down? Message us about web development, or read why a website loads slowly.