HTML Iframe


What is an <iframe>?

The <iframe> (short for inline frame) is an HTML element used to embed another HTML document (like a webpage, video, or map) inside the current page.


Syntax

<iframe src="url" width="width" height="height"></iframe>
  • src: URL of the page or content to embed
  • width / height: Set the size of the iframe
  • Optional attributes can control behavior and appearance

Common Attributes

Attribute Description
src URL of the embedded content
width Width of the iframe (in px or %)
height Height of the iframe
title Improves accessibility
frameborder (Deprecated) Controls border visibility
allowfullscreen Allows full-screen mode for embedded videos
loading Controls lazy loading ("lazy" or "eager")
sandbox Adds restrictions to the embedded content

Use Cases

  • Embedding a YouTube video
  • Showing a Google Map
  • Displaying external web pages
  • Embedding tools or forms from other domains

Best Practices

  • Always provide a meaningful title for accessibility
  • Use sandbox to add security if embedding third-party content
  • Avoid excessive use of iframes to prevent performance issues
  • Set responsive styles using CSS if embedding in mobile layouts