Embedding iframes in HTML
Embed Content with Examples & Responsive Design

Advanced Topics

Embedding iframes in HTML: Bring the Outside In

The <iframe> tag lets you embed other web pages or media directly into your HTML. From YouTube videos to maps, documents, or custom dashboards, iframes are your window to external content — all from within your own page.

1. Basic iframe Syntax

<iframe src="https://example.com" width="600" height="400">
  Your browser does not support iframes.
</iframe>

[ A 600x400 embedded frame showing https://example.com ]

The src defines the URL to embed, while width and height define the size.

2. Attributes That Matter

| Attribute | Purpose | |----------|---------| | src | URL of the content to embed | | width, height | Size of the iframe | | title | Text for accessibility and screen readers | | allowfullscreen | Enables full-screen mode (e.g., for videos) | | loading="lazy" | Improves performance by loading iframe only when visible | | referrerpolicy | Controls the referrer header (e.g., no-referrer) | | sandbox | Limits iframe's access to JavaScript and other features for security |

3. Example: Embedding a YouTube Video

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/banana123"
  title="Banana Smoothie Tutorial"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

[ YouTube video appears with fullscreen option ]

QUIZ

Question 1:What is the purpose of the iframe tag in HTML?

Question 2:The src attribute in an iframe specifies the URL of the content to embed.

Question 3:Which of the following are common attributes for the iframe tag?

Question 4:Why should you consider security when embedding iframes?

Question 5:Responsive iframes can be created using CSS techniques like percentage widths and aspect ratio boxes.

Question 6:Which techniques can help make iframes responsive in a webpage?