Use an HTML <iframe> to display another webpage inside your own. Set its src to the page’s URL, give it a descriptive title, and define its size. Whether it loads depends on whether the site being embedded allows framing.
Embed a webpage with an iframe
An <iframe> creates a nested browsing context containing a separate document. MDN describes it as “a nested browsing context, embedding another document into the current one.” Use the opening and closing tags, with the destination URL in src:
<iframe
src="https://example.com"
title="Example service page"
width="600"
height="400"
loading="lazy">
</iframe>Replace the example URL with the page you want to display. The example dimensions are in CSS pixels; they are starting values, not a guarantee that the embedded site will fit every screen.
Size the frame for your page
The width and height attributes set the iframe’s dimensions, but CSS can override them. A fluid width can help it fit a narrow parent container:
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
iframe {
display: block;
width: 100%;
max-width: 100%;
height: 400px;
border: 0;
}Here, the width follows the parent element while the height remains controlled. Setting width: 100% does not automatically make the frame as tall as the remote page. The parent normally cannot read the dimensions of a cross-origin document, so choose a suitable height or use an embedding arrangement supported by the destination site.
Give the frame an accessible title
Set title to a concise description of what the frame contains, such as title="Online booking form". Screen-reader users can use this label to identify the embedded frame without first navigating into it.
Check whether the other site permits embedding
An iframe can be valid HTML and still show an error or blank area if the destination site’s security policy refuses to be framed. Check that site’s current embedding instructions and policy; permission varies by site, and there is no universal iframe setting that overrides it.
If framing is blocked, use an official embed option if the site provides one, or link to the page instead. The older SitePoint forum thread that asked this question dates to July 12, 2016; its iframe recommendation remains the relevant approach for embedding a full webpage, but the destination’s current policy determines whether it will work.
Know what the parent page can and cannot control
The iframe element can be styled on the outer page—for example, to set its width, height, or border. That does not give the parent page permission to redesign the unrelated document shown inside it. Browsers restrict script access across origins under the same-origin policy. If both pages need to exchange messages, they can implement the cross-origin postMessage() API.
Use sandbox restrictions only when appropriate
The sandbox attribute applies restrictions to content inside the frame. Add only the individual permissions the embedded application needs, and test its forms, scripts, and popups after applying restrictions. For example:
Rank #4
<iframe
src="https://example.com"
title="Example service page"
sandbox
width="600"
height="400">
</iframe>A bare sandbox applies restrictions without granting additional permissions. Some applications will not work in that state. MDN also warns that combining allow-scripts and allow-same-origin for same-origin embedded content can undermine the sandbox; do not add those tokens automatically.
Defer offscreen frames when useful
Each iframe loads a separate document environment and adds memory and computing work. For a frame below the initial viewport, loading="lazy" can defer loading and reduce initial page work:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors<iframe
src="https://example.com"
title="Example service page"
width="600"
height="400"
loading="lazy">
</iframe>MDN notes that lazy loading applies when JavaScript is enabled. It is a loading hint, not a way to bypass a site’s framing restrictions.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Choose the right embedding element
For another complete webpage, use <iframe>. The HTML <object> and <embed> elements serve other embedding use cases and resource types; they are not general replacements for an iframe when the goal is to place a web document inside a page.
If your goal is to add audio rather than another webpage, use the HTML <audio> element instead. Audio is a separate use case from iframe embedding.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
