HTML <iframe> Tag

The <iframe> tag is used to embed another HTML document within the current HTML document. It creates an inline frame, essentially a nested browsing context where another web page can be displayed. This allows you to integrate content from different sources, such as videos, maps, or even entire web pages, into your site.

Syntax

<iframe src="URL" 
        width="pixels" 
        height="pixels" 
        title="text"
        allow="feature-policy" 
        allowfullscreen
        loading="eager/lazy"
        name="frame_name" 
        referrerpolicy="no-referrer/origin/etc."
        sandbox="security_restrictions"
        srcdoc="HTML content">
    Fallback content if iframe is not supported
</iframe>

Attributes

Example

<iframe src="https://www.example.com" width="600" height="400" title="Example Website"></iframe>

More Examples

Embedding a YouTube Video

<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; web-share" allowfullscreen></iframe>

This example demonstrates embedding a YouTube video. The src attribute contains the embed URL of the video, and allowfullscreen lets user view the video in full screen.

Embedding a Google Map

<iframe
  width="600"
  height="450"
  frameborder="0"
  style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Eiffel+Tower,Paris"
  allowfullscreen>
</iframe>

Here, we embed a Google Map of a particular location. Note you have to get an API key from the Google Cloud Console to do it properly.

Using loading="lazy"

<iframe src="https://www.example.com/large-page.html" width="600" height="400" loading="lazy" title="Large Example Page"></iframe>

This example shows how to use the loading="lazy" attribute to defer loading of the iframe until it's near the viewport, improving initial page load time, especially for iframes that are not immediately visible on screen.

Using srcdoc to Directly Embed HTML

<iframe srcdoc="<h1>Embedded Content</h1><p>This content is directly in the iframe.</p>" width="400" height="200" title="Inline HTML Iframe"></iframe>

In this example, the srcdoc attribute is used instead of src to directly embed HTML content into the iframe. If both src and srcdoc are specified, srcdoc takes precedence.

Using sandbox for security

<iframe src="https://insecure-content.example.com" width="400" height="300" title="Insecure Content Frame" sandbox="allow-scripts allow-same-origin"></iframe>

The sandbox attribute adds a layer of security. Here we allowed scripts and same-origin, but can add other restrictions as needed. When no sandbox attribute is provided, it is treated as sandbox="allow-scripts allow-same-origin allow-popups allow-forms".
By default, sandboxed iframes are treated as if it were served from an unknown unique origin. They also:

• Block form submission
• Block JavaScript execution
• Block popups
• Block access to localStorage or cookies

Browser Support

The <iframe> tag is supported by all modern browsers.
| Browser | Version |
|—|—|
| Chrome | 1+ |
| Edge | 12+ |
| Firefox | 1+ |
| Safari | 1+ |
| Opera | 4+ |

Notes and Tips

• Security: Be cautious when embedding content from untrusted sources. Use the sandbox attribute to enforce security restrictions.
• Accessibility: Provide a meaningful title attribute for the iframe, as this is used by screen readers. Also, ensure that the content inside the iframe is accessible.
• Performance: Avoid embedding too many iframes, as they can impact page performance. Use the loading="lazy" attribute for iframes that are not initially visible.
• Avoid overuse: Overusing iframes can make your page more difficult to navigate and understand.
• Responsive design: Use CSS to make iframes responsive, so they scale properly on different screen sizes.
• Fallback content: It is best practice to include fallback content to display in case the browser does not support iframe tag.
  “`html