HTML Iframes

An iframe (short for inline frame) allows embedding another webpage or external content — such as a Google Map, a YouTube video, or another HTML page — directly inside the current page. Think of it as a window inside a window.

Basic Iframe Syntax

<iframe src="URL" width="600" height="400"></iframe>

The src attribute specifies the URL of the page to embed. width and height control the display size.

Embedding a Web Page

<iframe src="https://www.wikipedia.org" width="800" height="500"></iframe>

Embedding a YouTube Video

To embed a YouTube video, use the embed URL format. The embed URL can be obtained by clicking Share > Embed on any YouTube video.

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  title="YouTube video player" 
  allowfullscreen>
</iframe>

<!-- Replace VIDEO_ID with the actual YouTube video ID -->
<!-- Example: https://www.youtube.com/embed/dQw4w9WgXcQ -->

Embedding Google Maps

Google Maps can be embedded by copying the iframe code from Google Maps. Navigate to a location on Google Maps, click Share > Embed a map, and copy the iframe code provided.

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12..." 
  width="600" 
  height="450" 
  allowfullscreen="" 
  loading="lazy">
</iframe>

<!-- The full src URL is generated by Google Maps when you click Share > Embed a map -->

Embedding a Local HTML File

An iframe can also embed a separate HTML file stored on the same website.

<iframe src="sidebar.html" width="300" height="400"></iframe>

Iframe Attributes

Attribute	Purpose
`src`	URL of the page or content to embed
`width`	Width of the iframe in pixels or percentage
`height`	Height of the iframe in pixels
`title`	Accessible name for the iframe (required for accessibility)
`allowfullscreen`	Allows the iframe content to go fullscreen
`loading`	Set to `lazy` to load only when visible
`name`	Allows a link's target to open inside the iframe
`sandbox`	Restricts what the iframe content can do (security)

Using Iframe as a Link Target

When a link is clicked, it can open in an iframe instead of the current window. Set the name attribute on the iframe and use it as the target attribute on the link.

<a href="page1.html" target="preview">View Page 1</a>
<a href="page2.html" target="preview">View Page 2</a>

<iframe name="preview" width="600" height="400"></iframe>

The sandbox Attribute (Security)

The sandbox attribute restricts what the embedded page can do — such as running JavaScript or submitting forms. This improves security when embedding content from untrusted sources.

<!-- Fully sandboxed (no scripts, no forms, no navigation) -->
<iframe src="https://example.com" sandbox></iframe>

<!-- Allow scripts but no forms -->
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

<!-- Allow forms and navigation -->
<iframe src="https://example.com" sandbox="allow-forms allow-same-origin"></iframe>

Responsive Iframe (Full Width)

To make an iframe span the full width of its container, set width to 100%.

<iframe src="https://www.example.com" width="100%" height="400" title="Example Page"></iframe>

Key Points to Remember

An <iframe> embeds another web page or resource inside the current page
Always include a title attribute for accessibility
Many websites block being embedded in iframes using security headers
YouTube and Google Maps provide their own iframe embed codes — use those directly
Use the sandbox attribute to restrict iframe content for security
Set loading="lazy" to improve page performance by delaying iframe loading
Avoid using too many iframes on a page as they can slow down loading

Previous lessons

Back to courses

Next lessons