An iframe is an HTML document embedded inside another HTML document on a website. Think of it as a "webpage within a web page."

Perhaps you've seen the movie Inception, which deals with dreams within dreams. Or played with one of those Russian nested dolls. This is the same concept.

Photo by BrokenSphere (CC BY-SA 3.0)

HTML iframe tag Example

The iframe HTML tag is used to specify the URL of the document to be embedded.

Iframes are often used to embed videos, maps, and other media on a web page. You can also use them to embed another web page into a web page. Here are a few examples of code using iframe to embed an external resource:

<iframe src="">

<iframe src="" width="400" height="300">

<iframe src="" style="border: 0;">

Here are a couple of examples of embedding interactive resources in HTML. This particular code will embed a Vimeo video player:

<iframe src="" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Iframes have been around since the early days of the web. Developers originally used them to embed external content on a web page, such as a video from YouTube.

There are also "toolbar" type websites like Stumbleupon that would add their toolbar on top of a website. Stumbleupon would do this by rendering the website on their own page using an iframe.

Why developers have mostly stopped using iframes in their websites

Nowadays, developers still use iframes are still used for embedding media and other content on a web page. But due to security considerations, many web development frameworks discourage this.

At the end of the day, an iframe running inside of another web page will not be an ideal user experience. Iframes can look particularly bad on mobile phones, and break otherwise responsive web design layouts. This is why iframes have largely fallen out of favor.

I hope you've found this helpful. If you want to learn more about programming and technology, try freeCodeCamp's core coding curriculum. It's free.