HTML Iframes

Discover techniques for integrating external webpage content directly within your document structure through inline frame elements

Inline frames (iframes) render nested webpage content inside parent documents. The <iframe> element establishes embedded viewing regions displaying separate HTML resources within hosting pages.

HTML Iframe Syntax

The HTML <iframe> tag defines an inline frame:

Syntax

<iframe src="url" title="description"></iframe>

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.

Iframe Example

The following example shows how to embed a web page within a web page:

Example

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

Try it Yourself ›

Click the button below to open this example in our interactive editor:

Try it Yourself ›

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example

<iframe src="demo_page.html" height="200" width="300" title="Demo Iframe"></iframe>

Or you can add the style attribute and use the CSS height and width properties:

Example

<iframe src="demo_page.html" style="height:200px;width:300px;" title="Demo Iframe"></iframe>

Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example

<iframe src="demo_page.html" style="border:none;" title="Demo Iframe"></iframe>

With CSS, you can also change the size, style, and color of the iframe's border:

Example

<iframe src="demo_page.html" style="border:2px solid red;" title="Demo Iframe"></iframe>

Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example

<iframe src="demo_page.html" name="iframe_a" title="Demo Iframe"></iframe>

<p><a href="https://www.example.com" target="iframe_a">Example.com</a></p>

Explanation:

When you click the link, the page will open in the iframe instead of the current window.

Common Iframe Attributes

Here are some commonly used attributes for the <iframe> element:

Attribute Description
src Specifies the URL of the page to embed
title Specifies the title of the iframe (required for accessibility)
height Specifies the height of the iframe (in pixels)
width Specifies the width of the iframe (in pixels)
name Specifies a name for the iframe (used as a link target)
loading Specifies whether to load the iframe on page load or when it's visible (eager or lazy)
sandbox Enables extra restrictions on the content in the iframe
allow Specifies a feature policy for the iframe

Iframe - Lazy Loading

The loading attribute can be used to defer loading of iframes that are off-screen until the user scrolls near them:

Example

<iframe src="demo_page.html" loading="lazy" title="Demo Iframe"></iframe>

Benefits:

  • Improves page load performance
  • Reduces initial bandwidth usage
  • Saves data for mobile users

Iframe - Sandbox Attribute

The sandbox attribute enables extra restrictions on the content in the iframe. This is important for security when embedding untrusted content.

Example - Basic Sandbox

<iframe src="demo_page.html" sandbox title="Sandboxed Iframe"></iframe>

Note:

An empty sandbox attribute applies all restrictions. You can selectively allow specific features:

Example - Allow Specific Features

<iframe src="demo_page.html" sandbox="allow-scripts allow-same-origin" title="Sandbox Iframe"></iframe>

Sandbox Values:

Value Description
allow-forms Allows form submission
allow-scripts Allows scripts to run
allow-same-origin Allows the iframe to be treated as same origin
allow-popups Allows popups to open
allow-modals Allows modal windows (alert, confirm, prompt)

Making Iframes Responsive

To make an iframe responsive, you can use CSS to make it scale with the viewport:

Example - Responsive Iframe

<style>
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

<div class="iframe-container">
    <iframe src="demo_page.html" title="Responsive Iframe"></iframe>
</div>

How it works:

  • The container uses padding-bottom to maintain aspect ratio
  • The iframe is absolutely positioned to fill the container
  • Change padding-bottom for different aspect ratios (75% = 4:3, 56.25% = 16:9)

Common Uses for Iframes

🎥 Video Embedding

YouTube, Vimeo, and other video platforms use iframes to embed videos: 

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

🗺️ Maps

Google Maps and other mapping services use iframes for embedding maps: 

<iframe src="https://maps.google.com/maps?..." width="600" height="450" title="Google Map"></iframe>

📱 Social Media

Social media platforms use iframes for embedded posts and feeds: 

<iframe src="https://www.facebook.com/plugins/post..." title="Facebook Post"></iframe>

📊 Third-Party Widgets

Analytics dashboards, payment forms, and other widgets often use iframes for isolation and security.

Iframe Accessibility

Making iframes accessible is crucial for users who rely on assistive technologies like screen readers. Here are the key accessibility considerations:

Essential Accessibility Attributes:

  • title attribute (Required): Provides a descriptive name that screen readers announce. This helps users understand the iframe's purpose before interacting with it.
  • Descriptive titles: Use clear, meaningful titles like "Customer feedback form" instead of generic ones like "form" or "iframe"
  • aria-label: Can be used as an alternative to title for more detailed descriptions
  • role attribute: Can specify the iframe's role (e.g., role="application" for interactive widgets)

Example - Accessible Iframe

<!-- Good: Descriptive title for screen readers -->
<iframe
    src="contact-form.html"
    title="Contact us form - Send us your feedback"
    loading="lazy"
    width="100%"
    height="500">
    <!-- Fallback content for browsers that don't support iframes -->
    <p>Your browser does not support iframes.
       <a href="contact-form.html">Visit our contact form page</a>.</p>
</iframe>

<!-- Bad: No title attribute -->
<iframe src="contact-form.html"></iframe>

<!-- Bad: Generic title -->
<iframe src="contact-form.html" title="iframe"></iframe>

Accessibility Tips:

  • Screen readers will announce the title when users navigate to the iframe
  • Fallback content is displayed if iframes are disabled or unsupported
  • Users can skip the iframe using keyboard navigation if they choose

💡 Accessibility Best Practices

  • Always include a meaningful title attribute
  • Provide fallback content between iframe tags
  • Ensure embedded content is also accessible (keyboard navigable, proper contrast, etc.)
  • Test with screen readers like NVDA, JAWS, or VoiceOver
  • Consider if an iframe is the best solution - sometimes a regular link is more accessible

Iframe Security Considerations

⚠️ Important Security Notes

  • Only embed trusted sources: Iframes can potentially contain malicious content
  • Use the sandbox attribute: Restrict capabilities when embedding untrusted content
  • Use HTTPS: Always use secure URLs to prevent man-in-the-middle attacks
  • Content Security Policy: Configure CSP headers to control iframe sources
  • X-Frame-Options: Be aware that some sites prevent being embedded in iframes

Best Practices Summary

  • Always include a title attribute - Required for accessibility and screen readers
  • Use lazy loading - Improves page load performance for off-screen iframes
  • Set explicit dimensions - Prevents layout shifts as the page loads
  • Use sandbox when appropriate - Adds security restrictions for untrusted content
  • Provide fallback content - Add content between iframe tags for browsers that don't support iframes
  • Test on mobile devices - Ensure iframes are responsive and touch-friendly
  • Use descriptive titles - Help screen reader users understand iframe content
  • Consider alternatives - Sometimes embedding isn't necessary; links might be better
  • Validate embedded content - Ensure the content inside the iframe is also accessible

Test Your Knowledge