Embedding pages: iframe

The <iframe> tag (inline frame) shows another page inside yours — with its own address, styles and scripts. This is how sites embed maps, YouTube videos, payment and comment widgets. By the way, every preview in this tutorial is an <iframe> too.

An embedded page

The address of the embedded page goes into the src attribute:

<iframe src="https://example.com"></iframe>

A small window with the example.com site appeared in the preview — you can scroll it, and its links work. By default the frame is 300 by 150 pixels.

Size and title

width and height set the frame size. The title attribute briefly describes the content — a screen reader reads it out when the user reaches the frame:

<iframe src="https://example.com" width="400" height="200" title="The example.com website"
        style="border: 1px solid #ccc;"></iframe>

The browser's default frame border is usually replaced with your own or removed in CSS with border: none.

A map

Many services provide ready-made embed code. OpenStreetMap, for example, gives a map by coordinates:

<iframe width="400" height="250" title="Map of central Lisbon"
        src="https://www.openstreetmap.org/export/embed.html?bbox=-9.15,38.70,-9.13,38.72&layer=mapnik"></iframe>

You can pan and zoom the map right in the preview. YouTube videos are embedded the same way: the Share menu has an Embed option that gives you a ready <iframe>.

Your own markup: srcdoc

Instead of an address you can pass HTML right in the srcdoc attribute. The page inside the frame is completely separate from the outer one — its styles do not apply outside, and vice versa:

<p style="color: crimson;">This text outside is red.</p>
<iframe srcdoc="<p>And this one inside the frame is plain.</p>" height="60"></iframe>

The style of the outer paragraph did not affect the paragraph in the frame: it is a separate document.

Lazy loading

Every embedded page loads like a whole website and slows yours down. The loading="lazy" attribute delays loading until the frame gets close to the visible area:

<p style="height: 200px;">Scroll down — the map loads when its turn comes.</p>
<iframe loading="lazy" width="300" height="150" title="Map"
        src="https://www.openstreetmap.org/export/embed.html?bbox=-0.13,51.50,-0.12,51.51&layer=mapnik"></iframe>

Restrictions: sandbox

The sandbox attribute forbids the embedded page almost everything: running scripts, submitting forms, opening windows. What is needed is allowed one by one, as words separated by spaces:

<iframe sandbox="allow-scripts" title="Widget"
        srcdoc='<button onclick="this.textContent = 1 + 1">What is 1 + 1?</button>'></iframe>

Press the button — a script works out the answer. Without allow-scripts the button would not work. Use sandbox when you embed content you do not fully trust.

Common mistake

Not every site can be embedded. Banks, email and many large services forbid showing themselves in other sites' frames, so that attackers cannot wrap them in a fake page and trick users into clicking the wrong button. Instead of the site you get a "refused to connect" message:

<iframe src="https://www.google.com" width="300" height="120" title="Google"></iframe>

This is not a bug in your code — look for a special embed address from the service.