Iframes: Embedding External Content

6 min read

Inline Frames

The <iframe> element embeds another HTML page inside your own. It is commonly used to embed maps, videos, social widgets, and payment forms.

html

<!-- Embedding 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"
  allowfullscreen
></iframe>

<!-- Embedding a Google Map -->
<iframe
  src="https://www.google.com/maps/embed?pb=!1m18..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  title="Office location map"
></iframe>

Iframes are a potential security risk. Only embed content from trusted sources. Always add a descriptive title attribute for accessibility — screen readers announce it to identify the embedded content.

Ready to test yourself?

Practice HTML— quiz & coding exercises