HTML iframe Tag: How to Embed Content with Examples

The iframe tag embeds another HTML page inside the current page. It loads content from a separate source.

Understand the <iframe> Tag in HTML

An <iframe> creates a rectangular region inside a page. This region displays another document from a different URL. The user can scroll or interact with it like any page.

You can use the <iframe> tag to load the following external sources:

• Maps
• Ads
• Videos
• Full web pages

Here is the basic tag of <iframe>:

<iframe src="URL" width="value" height="value" title="description"></iframe>

• src: The URL of the page to show.
• width: Width in pixels or percent.
• height: Height in pixels or percent.
• title: Describes the frame for accessibility.

For example:

<iframe src="https://example.com" width="600" height="400" title="Example Site"></iframe>

This loads “example.com” inside the current web page. The frame has a width of 600px and a height of 400px. Screen readers use the title for context.

The <iframe> Tag Attributes in HTML

You can use extra attributes to control security and behavior.

• sandbox limits access. Blocks scripts and form submissions.
• allow grants special permissions like camera or fullscreen.
• referrerpolicy controls what referrer to send.
• srcdoc replaces src loads of HTML code directly.
• allowfullscreen let the frame enter full screen.

Here’s a structure with advanced options:

<iframe src="https://example.com" width="500"  height="300"    title="Advanced Example" sandbox allow="fullscreen; microphone"  referrerpolicy="no-referrer" allowfullscreen></iframe>

Main Attributes:

• src sets the source page.
• width sets the width.
• height sets the height.
• title describes the content.
• name assigns a name to the frame.
• loading chooses lazy or eager loading.

Here are the use cases:

• Use src to load a remote or internal page.
• Use width and height to fix layout space.
• Use title for screen reader users.
• Use name to target the frame in links or scripts.
• Use loading="lazy" to load after scroll. It improves load time.

Here are two examples that show you these attribute usage:

Basic Frame With Lazy Load:

<iframe src="https://maps.google.com" width="600" height="400"  title="Map" loading="lazy"> </iframe>

This loads a map, and it delays the load until the user scrolls. It improves speed on large pages.

Frame With Target and Name

<iframe 
  src="page.html" 
  name="contentFrame" 
  width="400" 
  height="300" 
  title="Local Page">
</iframe>

<a href="other-page.html" target="contentFrame">Load New Page</a>

This creates a link that loads inside the frame. The frame uses the name to catch the link’s target.

Examples

Embed YouTube Video:

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

This shows a YouTube video inside a frame. It fits in a fixed-size box. The allowfullscreen tag lets users open the video full screen.

Use srcdoc Instead of URL:

<iframe 
  width="400" 
  height="200" 
  srcdoc="<h1><iframe> with srcdoc</h1><p>This comes from HTML code.</p>" 
  title="Inline HTML">
</iframe>

This loads custom HTML without a URL. It shows text from the srcdoc. The content is self-contained and does not rely on another page.

Sandbox With Restricted Access:

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

This loads a page but blocks scripts and plugins. It adds security and keeps the frame isolated.

Frame With Microphone and Fullscreen Access:

<iframe 
  src="https://example.com/app" 
  width="800" 
  height="600" 
  title="Advanced Permissions" 
  allow="microphone; fullscreen" 
  allowfullscreen>
</iframe>

This gives the page access to the microphone and full screen. It is useful for apps or video calls.

Wrapping Up

In this article, you learned what an <iframe> is and how to use it. You saw real code and use cases. You learned about both basic and advanced attributes.

Here is a quick recap:

• <iframe> loads another page inside a frame.
• src, width, height, and title are essential.
• sandbox, allow, srcdoc, and loading control behavior.
• Use name to target the frame from links.
• Choose srcdoc to embed inline HTML.
• Use allowfullscreen for video and game content.

FAQs

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

<iframe src="https://www.youtube.com/embed/ID" allowfullscreen></iframe>

<iframe srcdoc="<h1>Hello</h1>"></iframe>

<iframe src="file.html"></iframe>

Similar Reads