HTML Iframes

The <iframe> (inline frame) element lets you embed another webpage or interactive content (like videos or maps) inside your page.

  • src — URL to load inside the frame
  • width, height — size of the frame
  • title — accessible name for screen readers
  • allowfullscreen — allow entering fullscreen (video, etc.)
  • sandbox — restrict what the embedded page can do (security)
  • allow — fine-grained permissions (e.g. autoplay, clipboard-write)

Note: Some sites block being embedded using security headers (X-Frame-Options/frame-ancestors). Use providers that allow embedding (YouTube, Google Maps, etc.).

1) Basic Iframe


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

(If the site disallows embedding, the frame may appear blank.)

2) Embed a YouTube Video


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

3) Embed Google Maps


<!-- Use the Share > Embed a map option in Google Maps to get your own src -->
<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!...your-params..." 
  width="600" 
  height="350" 
  style="border:0;" 
  loading="lazy" 
  referrerpolicy="no-referrer-when-downgrade" 
  allowfullscreen>
</iframe>

4) Make Iframes Responsive


<!-- CSS: 16:9 container keeps aspect ratio -->
<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
          title="Responsive video" 
          allowfullscreen></iframe>
</div>

5) Security: sandbox and allow


<!-- Restrict capabilities with sandbox tokens -->
<iframe 
  src="/embedded-page.html"
  sandbox="allow-scripts allow-same-origin"
  allow="geolocation; microphone; camera"
  title="Embedded app with limited permissions">
</iframe>

Common sandbox tokens: allow-forms, allow-modals, allow-popups, allow-popups-to-escape-sandbox, allow-presentation, allow-same-origin, allow-scripts.

Tip: Always provide a meaningful title for accessibility. Use sandbox to restrict third-party content.