HTML Iframes

HTML Tutorial

HTML Iframes

An HTML iframes (<iframe>) is used to embed another webpage or content (like videos, maps, or external sites) inside your current webpage.

 1. What Is an Iframe?

  • <iframe> = inline frame

  • Displays another HTML page within a page

  • Common uses: YouTube videos, Google Maps, ads, dashboards

 2. Basic Iframe Example

 Loads example.com inside your page

 3. Iframe Attributes (Important)

AttributeDescription
srcURL of the page
widthWidth of iframe
heightHeight of iframe
titleAccessibility (required)
loadingLazy loading
allowPermissions
sandboxSecurity restrictions

 4. Iframe with Title (Best Practice )

 Improves accessibility

 5. Embedding YouTube Video (Very Common)

 Official YouTube embed format

6. Embedding Google Maps

7. Responsive Iframe (CSS Trick)


 


 

 Works perfectly on mobile

8. Iframe Security – sandbox Attribute (Important)

<iframe src="page.html" sandbox></iframe>

With permissions:

  •  Prevents malicious behavior
  • Very important for third-party content

9. Lazy Loading Iframes (Performance)

 Loads iframe only when visible

 Common Mistakes

  •  Missing title attribute
  •  Using iframe for main page layout
  •  Embedding sites that block iframes
  •  Forgetting responsive design

 Key Points to Remember

  • <iframe> embeds external content

  • Always add title

  • Use loading="lazy" for performance

  • Use sandbox for security

  • Make iframes responsive for mobile

You may also like...