Home / HTML / Iframes

HTML Iframes

What is an Iframe?

An iframe (inline frame) is an HTML element that embeds another HTML document within the current document. It allows you to display content from another source (web page, video, map, etc.) within your own page. The <iframe> element creates an inline frame.

Basic Iframe

The simplest iframe uses the src attribute to specify the URL of the page to embed:

Example

<iframe src="https://example.com"></iframe>

Iframe Attributes

Common attributes for iframes:

Width and Height

Set the size of the iframe:

Example

<iframe src="https://example.com" width="500" height="300"></iframe>

Note: The width and height attributes are deprecated in HTML5. Use CSS instead:

Example - Modern Way (CSS)

<style>
    iframe {
        width: 500px;
        height: 300px;
        border: 1px solid black;
    }
</style>
<iframe src="https://example.com"></iframe>

Name Attribute

The name attribute allows the iframe to be targeted by links:

Example

<iframe src="page1.html" name="myFrame" width="500" height="300"></iframe>
<a href="page2.html" target="myFrame">Load Page 2 in iframe</a>

Title Attribute

Always include a title attribute for accessibility:

Example

<iframe src="https://example.com" title="Example Website" width="500" height="300"></iframe>

Removing Border

Remove the default border around iframes:

Example

<style>
    iframe {
        border: none;
        width: 500px;
        height: 300px;
    }
</style>
<iframe src="https://example.com"></iframe>

Sandbox Attribute

The sandbox attribute adds security restrictions to the iframe content:

Example

<iframe src="https://example.com" sandbox width="500" height="300"></iframe>

Sandbox restrictions include:

Blocking forms
Blocking scripts
Blocking popups
Blocking plugins

Loading Attribute

The loading attribute controls when the iframe loads:

Example

<!-- Lazy loading - loads when near viewport -->
<iframe src="https://example.com" loading="lazy" width="500" height="300"></iframe>

<!-- Eager loading - loads immediately (default) -->
<iframe src="https://example.com" loading="eager" width="500" height="300"></iframe>

Responsive Iframe

Make iframes responsive using CSS:

Example

<style>
    .iframe-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
    }
    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
</style>
<div class="iframe-container">
    <iframe src="https://example.com" title="Responsive iframe"></iframe>
</div>

Common Use Cases

Embedding Videos

Iframes are commonly used to embed videos from YouTube, Vimeo, etc.:

Example

<iframe src="https://www.youtube.com/embed/VIDEO_ID" 
        width="560" 
        height="315" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

Embedding Maps

Embedding Google Maps or other map services:

Example

<iframe src="https://www.google.com/maps/embed?pb=..." 
        width="600" 
        height="450" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy">
</iframe>

Best Practices

Always include title attribute: Essential for accessibility
Use sandbox when appropriate: Add security restrictions for untrusted content
Make iframes responsive: Ensure they work on mobile devices
Consider lazy loading: Use loading="lazy" for better performance
Handle errors: Provide fallback content if the iframe fails to load
Respect X-Frame-Options: Some sites block embedding with this header

Fallback Content

Provide fallback content between the iframe tags for browsers that don't support iframes:

Example

<iframe src="https://example.com" width="500" height="300">
    <p>Your browser does not support iframes. <a href="https://example.com">Visit the page directly</a>.</p>
</iframe>

← HTML Buttons HTML JavaScript →