HTML Iframes

What Is an Iframe?

The <iframe> tag allows you to embed another webpage, video, or resource within your current page. It acts like a window to another site.

Basic Syntax

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

The src attribute sets the embedded page’s URL. Width and height control its visible size.

Common Attributes

src – The URL of the page to embed
width / height – Size of the iframe
title – Accessibility description
loading="lazy" – Delays loading until iframe scrolls into view
allowfullscreen – Enables full-screen capability for media

Embedding YouTube

To embed a YouTube video, use the /embed/ format and optionally allow full-screen:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video"
  frameBorder="0"
  allowfullscreen
  loading="lazy">
</iframe>

Security and Best Practices

Use the title attribute for accessibility
Don’t embed insecure third-party sites
Use sandbox to restrict iframe behavior (e.g., scripts, forms)
Use referrerpolicy="no-referrer" for privacy

<iframe src="https://trusted.com" sandbox referrerpolicy="no-referrer"></iframe>

Practice Prompt

Embed a YouTube video with:

Width: 560
Height: 315
allowfullscreen enabled
loading="lazy" enabled

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

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu