iFrames in HTML

iFrames (inline frames) allows you to embed another HTML document inside your webpage. They are commonly used to include videos, maps, and widgets from other websites.

What is an iFrame?

An iFrame is an HTML element that loads an external webpages or resource within a frame, without redirecting the user from the current page.

It acts like a “window” displaying content from another source.

Why use iFrames?

Embed External content like YouTube videos, Google Maps, or ads.
Keep third-party content isolated from your main HTML/CSS.
Load external tools or widgets without affecting your site’s structure.
Allow asynchronous loading of embedded content.

Basic Syntax

				
					<iframe src="URL" width="600" height="400"></iframe>

src: The URL of the page to embed.
width & height: Set the visible size of the iframe.

Common iFrame Attributes

Attribute	Description
`src`	URL of the embedded page
`width` / `height`	Controls the size of the iFrame
`frameborder`	Set to “0” to remove the border
`scrolling`	Allows/disables scrollbars (`yes`, `no`, `auto`)
`allowfullscreen`	Enables fullscreen mode for videos (like YouTube)
`name`	Assigns a name for targeting via scripts or links

Embed YouTube Video

				
					<iframe 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  width="560" 
  height="315" 
  frameborder="0" 
  allowfullscreen>
</iframe>

Embed Google Maps

				
					<iframe 
  src="https://maps.google.com/maps?q=New York City&output=embed" 
  width="600" 
  height="450" 
  frameborder="0">
</iframe>

iFrame Tips

Avoid using iFrames for critical content-search engines may not index it.
Be cautious when embedding untrusted sources-they can include harmful scripts.
Some websites use X-Frame-options to block embedding for security.

Conclusion

iFrames are a simple yet powerful tool for embedding external content. Whether you’re adding a video, map, or app, iFrames help you integrate external features without complicating your own HTML structure.