ProgramGuru

HTML iframe Tag

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 |

Check your understanding 1

What is the purpose of the iframe tag in HTML?
Choose one answer. You can try again.

Answer and explanation

To embed another HTML page within the current page

The iframe tag allows you to embed an external webpage or content inside the current HTML document.

Check your understanding 2

The src attribute in an iframe specifies the URL of the content to embed.
Choose one answer. You can try again.

Answer and explanation

True

The src attribute defines the source URL of the webpage or resource that will be loaded inside the iframe.

Check your understanding 3

Choose the option that lists all and only the correct statements.

  1. src
  2. width
  3. height
  4. onclick
Which of the following are common attributes for the iframe tag?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 2 and 3

Common attributes include src for URL, and width, height to control the iframe size. onclick is an event attribute but not typically used with iframes.

Check your understanding 4

Why should you consider security when embedding iframes?
Choose one answer. You can try again.

Answer and explanation

Because embedded content can run scripts that affect your page

Security is crucial since embedded content can execute JavaScript, which might lead to cross-site scripting (XSS) or clickjacking vulnerabilities if not handled properly.

Check your understanding 5

Responsive iframes can be created using CSS techniques like percentage widths and aspect ratio boxes.
Choose one answer. You can try again.

Answer and explanation

True

Using CSS, you can make iframes adapt fluidly to different screen sizes by controlling width and height with relative units and aspect ratio containers.

Check your understanding 6

Choose the option that lists all and only the correct statements.

  1. Using CSS max-width: 100%
  2. Wrapping iframe in a container with position: relative;
  3. Setting fixed pixel widths
  4. Using aspect ratio padding for height control
Which techniques can help make iframes responsive in a webpage?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 2 and 4

Responsive iframes often involve CSS tricks like max-width, relative positioning containers, and padding to maintain aspect ratio. Fixed pixel widths hinder responsiveness.

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 ]

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: How to Integrate HTML and JavaScript →