HTML Iframes

An "iframe" stands for Inline Frame. It acts like a window cut into your webpage, allowing you to load and display a completely separate, independent HTML document from another URL inside that window.

Iframes are the primary mechanism used across the internet to embed YouTube videos, interactive Google Maps, third-party advertising banners, and social media feeds seamlessly into a website.

Basic Syntax

To create an iframe, you use the <iframe> tag and provide the URL you want to embed using the src attribute. Unlike an image tag, the iframe tag requires a closing </iframe> tag.

<!-- A simple iframe pointing to Wikipedia -->
<iframe src="https://www.wikipedia.org"></iframe>

By default, iframes are quite small and have a thick, ugly border surrounding them. You must use CSS to customize their appearance.

<!-- Applying width, height, and removing the native border -->
<iframe src="https://www.wikipedia.org" 
        style="width: 100%; height: 400px; border: none;">
</iframe>

Live Example

Note: Notice how we embedded the standard "example.com" directly into this tutorial box!

Using an Iframe as a Link Target

One of the most powerful features of an iframe is that it can act as the destination for standard <a> navigation links. By assigning a name attribute to the iframe, you can force external links to load inside the window rather than navigating the entire browser tab away.

<!-- The iframe is named "viewer-window" -->
<iframe src="/default-document.html" name="viewer-window" style="height: 300px; width: 100%;"></iframe>

<!-- This link targets the iframe using the "target" attribute -->
<a href="https://example.com" target="viewer-window">Load Example.com in the Iframe</a>

Real World Usage: YouTube

When you click "Share > Embed" on a YouTube video, the code they give you is literally just an HTML iframe snippet with some specialized attributes.

<!-- An embedded YouTube video using an iframe -->
<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

Safety Warning (The X-Frame-Options Header): You cannot embed any website you want. Many major websites (like Google Search, Facebook, or your banking portal) send a special security header called X-Frame-Options: DENY. This tells the browser to block their site from loading inside any iframe to prevent "Clickjacking" attacks. If you get a "Connection Refused" error in your iframe, this is why!

The Sandbox Attribute

If you are embedding third-party content that you do not fully trust (like an external widget or an ad), you should use the sandbox attribute. This prevents the code inside the iframe from running dangerous scripts, submitting forms, or popping up annoying alert boxes.

<!-- An iframe completely locked down by the sandbox -->
<iframe src="/untrusted-widget.html" sandbox></iframe>

You can gently lift specific restrictions by adding values to the sandbox list, such as: sandbox="allow-scripts allow-forms".

« Previous Lesson Next Lesson »