An iframe, short for inline frame, is a window on your web page that shows a completely separate web page inside it. When you see a YouTube video, a Google Map or a booking calendar sitting in the middle of someone's site, it is very often an iframe loading that content from the other company's servers.
How an iframe works
In HTML it is one tag: <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>. The browser reserves a box of that size and loads the address in src into it, as if it were a small browser tab. The framed page keeps its own styles, scripts and cookies, and the browser's same-origin rules stop it from reading or changing your page, and stop your page from reaching into it.
Useful attributes include title (a label screen readers announce), loading="lazy" (wait until the frame is near the viewport, see lazy loading), allow (which features like fullscreen or camera the frame may use) and sandbox (restrict what the framed page can do).
Example: a gym's class schedule
A gym uses a class-booking service. The service gives them a short snippet of embed code containing an iframe. Pasted into the "Timetable" page, it shows the live schedule and booking buttons. When a member books, they are actually using the booking company's page, framed inside the gym's site, so the gym never handles the booking data directly.
When iframes matter to a small business
You use iframes whenever you embed someone else's tool: video, maps, calendars, forms, some payment fields. That is usually a good trade, because the specialist handles the hard part. Two things to know. First, search engines treat the framed content as belonging to the other site, so the text inside does not count as your page's content. Second, sites can refuse to be framed: many, including banks and most big platforms' normal pages, send a header (X-Frame-Options or a frame-ancestors policy) that makes the browser show an empty or error box instead. That is why you embed the provider's official embed URL, not the ordinary page address.
Iframe mistakes
- Fixed width on mobile. A 600-pixel-wide frame overflows a phone screen. Set width to 100% and control height with CSS aspect-ratio.
- Several heavy embeds above the fold. Each frame loads a whole page; three video embeds can make your page slow.
- Missing title attribute. Screen reader users hear "frame" with no idea what it contains.
- Framing an http address on an https site. Browsers block mixed content, so the frame stays blank. Use HTTPS sources.
Related terms
- Embed code: the snippet that usually contains the iframe.
- Widget: many widgets render inside an iframe.
- Lazy loading: delays off-screen frames.
- HTML: the language the iframe tag belongs to.