html
/

HTML iFrame: Embedding External Content

Last Sync: Today

On this page

10
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML iFrame: Embedding External Content

What is an iFrame?

An iFrame (inline frame) is used to embed another webpage or external content within the current HTML page.

Basic Syntax

HTMLRead-only
1
<iframe src="https://example.com" width="600" height="400"></iframe>

Common Attributes

AttributeDescription
srcURL of the embedded page
widthWidth of iframe
heightHeight of iframe
titleAccessibility description
allowfullscreenEnable fullscreen mode
loadingLazy loading (lazy/eager)

Embedding YouTube Video

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

Embedding Google Map

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

Inline Frame Example

HTMLRead-only
1
<iframe src="page.html" width="400" height="200"></iframe>

Security Considerations

iFrames can pose security risks. Use attributes like sandbox to restrict behavior and ensure content comes from trusted sources.

HTMLRead-only
1
<iframe src="https://example.com" sandbox></iframe>

Best Practices

  • Always include title for accessibility
  • Use trusted sources only
  • Enable lazy loading for performance
  • Use sandbox for security
  • Avoid excessive use of iframes

Common Mistakes

  • Embedding insecure or unknown sources
  • Not setting dimensions properly
  • Ignoring accessibility (missing title)
  • Overusing iframes affecting performance

Conclusion

HTML iFrames are powerful for embedding external content like videos and maps. Proper use ensures security, performance, and a smooth user experience.

Try it yourself

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

Test Your Knowledge

Q1
of 3

Which tag is used to embed another webpage?

A
<frame>
B
<iframe>
C
<embed>
D
<object>
Q2
of 3

Which attribute specifies the URL?

A
href
B
src
C
link
D
url
Q3
of 3

Which attribute improves security?

A
secure
B
sandbox
C
safe
D
protect

Frequently Asked Questions

What is an iframe?

It is used to embed another webpage inside a webpage.

Is iframe safe to use?

Yes, if used with trusted sources and security attributes like sandbox.

Can I embed YouTube videos using iframe?

Yes, YouTube provides iframe embed code.

Previous

html video

Next

html forms

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.