Use this iframe code to embed another HTML page inside the current page:

<iframe src=”https://example.com/embed” title=”Example embedded page” width=”800″ height=”450″></iframe>

The src attribute supplies the URL to load. The title describes the embedded content for people using assistive technology. The width and height set the iframe viewport, usually in CSS pixels when declared as HTML attributes.

How do you write basic iframe code with src, title, width, and height?

Start with the smallest complete element, then add styling only when the embed requires it. The opening and closing tags create the embedded browsing context, while the attributes define its source, accessible name, and initial dimensions.

• src: The page or resource displayed inside the iframe. Use the complete embed URL provided by the service or application.
• title: A short, meaningful description such as “Product demonstration” or “Store locator.” Avoid repeating a generic label across several iframes.
• width: The initial horizontal size of the embedded viewport.
• height: The initial vertical size of the embedded viewport.

Keep the title even when the iframe is visually obvious. It provides context to visitors who navigate by landmarks or embedded content.

How should you set an iframe’s width and height?

Use CSS for responsive sizing and reserve HTML width and height attributes for a simple fallback or an intrinsic starting size. A common stylesheet is:

iframe { display: block; width: 100%; max-width: 800px; height: 450px; }

This makes the iframe fill its available container up to 800 pixels while keeping a predictable 450-pixel viewport. Set a definite height when the embedded page must remain usable on smaller screens. Width alone does not make the height adapt to the embedded page.

For a consistently proportioned video or presentation, CSS can use an aspect ratio instead:

iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; }

Test the result at narrow and wide viewport sizes. An embed that is too short may create unnecessary internal scrolling, while an oversized fixed height can leave excessive empty space.

How do you style an iframe border with CSS instead of legacy frameborder?

Style the iframe element with the CSS border property:

iframe { border: 1px solid #c7c7c7; }

Use border: 0; when the embedded design should blend into the surrounding page. You can also set individual sides, color, width, and radius in CSS. The phrase iframe frame border usually refers to this visible edge around the embedded viewport.

The frameborder HTML attribute is legacy markup. Do not use frameborder=”0″ as the current implementation. Replace it with a CSS rule such as border: 0;, or define the border explicitly so its appearance remains consistent across browsers and themes.

How does iframe scrolling work, and what replaces the legacy scrolling attribute?

An iframe has its own document and viewport. When the embedded document is taller or wider than that viewport, the embedded page normally scrolls inside the frame. Changing the iframe’s dimensions does not automatically resize it to fit all of the embedded content.

The scrolling attribute is legacy markup. Do not use values such as scrolling=”no” or scrolling=”auto” for new implementations. Control overflow in the embedded document with CSS:

html, body { overflow: auto; }

Use overflow: hidden; only when the embedded content is designed to fit without scrolling:

html, body { overflow: hidden; }

This CSS must apply inside the embedded page. If the iframe loads content from another origin, the parent page cannot directly change that page’s overflow rules. In that case, use the provider’s responsive embed method, an appropriate fixed height, or a documented messaging and resize system. The host page’s CSS can size and border the iframe, but the embedded document controls its own internal layout and scrolling.