HTML Iframes

The HTML <iframe> (inline frame) element allows you to embed another HTML document within the current page. Iframes are commonly used to embed maps, videos, advertisements, social media widgets, and other external content into your website.

Basic Iframe Syntax

The basic syntax of an iframe includes the src attribute to specify the source URL:

<!-- Basic iframe -->
<iframe src="https://www.example.com"></iframe>

<!-- With dimensions -->
<iframe src="https://www.example.com" width="600" height="400"></iframe>

Common Attributes

Here are the most commonly used attributes for iframes:

<!-- Complete iframe with attributes -->
<iframe 
  src="https://www.example.com"
  width="800"
  height="600"
  frameborder="0"
  scrolling="auto"
  allowfullscreen
  loading="lazy"
  title="Example website">
</iframe>

Embedding YouTube Videos

Here's how to embed a YouTube video:

<!-- YouTube iframe -->
<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 Maps

Here's how to embed a Google Map:

<!-- Google Maps iframe -->
<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933039!2m3!1f1024!2f768!3f1!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a316bb7e1b7%3A0x6f5e5b5b5b5b5b5b!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sus!4v1234567890"
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy" 
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

Embedding Social Media

Here's how to embed social media content:

<!-- Twitter embed -->
<iframe 
  src="https://platform.twitter.com/embed/Tweet.html?id=TWEET_ID"
  width="550"
  height="300"
  title="Twitter embed">
</iframe>

<!-- Facebook embed -->
<iframe 
  src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FUSER%2Fposts%2FPOST_ID"
  width="500"
  height="600"
  style="border:none;overflow:hidden"
  scrolling="no"
  frameborder="0"
  allowfullscreen="true"
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>

Sandbox Attribute

The sandbox attribute adds security restrictions to the iframe content:

<!-- Basic sandbox (most restrictive) -->
<iframe src="untrusted-content.html" sandbox></iframe>

<!-- Allow specific features -->
<iframe 
  src="trusted-content.html" 
  sandbox="allow-scripts allow-same-origin allow-forms">
</iframe>

<!-- Sandbox options -->
<!-- allow-scripts: Allow JavaScript -->
<!-- allow-same-origin: Treat as same origin -->
<!-- allow-forms: Submit forms -->
<!-- allow-popups: Open popups -->
<!-- allow-top-navigation: Navigate top window -->

Content Security Policy

<!-- CSP header example (server-side) -->
<!-- Content-Security-Policy: frame-src 'self' https://trusted-domain.com -->

<!-- Only allow iframes from trusted domains -->
<iframe src="https://trusted-domain.com/embed" title="Trusted content"></iframe>

Lazy Loading

The loading attribute improves performance by loading iframes only when needed:

<!-- Lazy loading (default for modern browsers) -->
<iframe 
  src="https://www.example.com" 
  loading="lazy"
  width="800" 
  height="600"
  title="Lazy loaded content">
</iframe>

<!-- Eager loading (load immediately) -->
<iframe 
  src="https://www.example.com" 
  loading="eager"
  width="800" 
  height="600"
  title="Eager loaded content">
</iframe>

Best Practices