In this lesson, you'll learn about the <iframe> element, which is used to embed another HTML page or external content (like videos or maps) within your current webpage. Iframes allow you to display content from another source without leaving your site.

What Is an <iframe>?

An iframe (short for inline frame) lets you embed another HTML document inside the current document. This can be used to show content such as a video player, an interactive map, or even an entirely separate website within a section of your page.

Basic Syntax

The basic structure of an iframe is very simple:

<iframe src="URL"></iframe>

• <iframe>: The element used to embed another document.
• src="URL": Specifies the URL of the page or content you want to display.

You can also include additional attributes such as width, height, and frameborder to control how the iframe is displayed.

Common Attributes

Here are some of the most commonly used attributes with iframes:

• src The URL of the page to embed.
• width and height Define the dimensions of the iframe in pixels.
• frameborder Specifies whether the iframe should have a border. (Typically set to "0" to remove the border.)
• allowfullscreen Allows the embedded content to be viewed in full-screen mode.

Example 1: Basic Iframe

This example demonstrates a simple iframe that embeds an external webpage.

Explanation:

• src="https://www.example.com" : Embeds the content from example.com.
• width="600" height="400" : Sets the iframe size to 600 pixels wide by 400 pixels tall.
• frameborder="0" : Removes any visible border around the iframe.
• The fallback text "Your browser does not support iframes." is displayed if the user’s browser does not support this element.

Example 2: Iframe for Video Content

Often, iframes are used to embed video players (such as YouTube videos) into a webpage.

Explanation:

• The src attribute contains the YouTube embed URL.
• The dimensions are specified to properly display the video.
• frameborder="0" removes the border.
• allowfullscreen enables full-screen viewing of the video.

Considerations When Using Iframes

• Security: Be cautious when embedding content from untrusted sources as it can pose security risks. Some websites restrict being embedded using iframes.
• Responsiveness: While basic HTML allows you to set fixed dimensions, creating a fully responsive iframe may require additional techniques (often with CSS or JavaScript). For now, beginners can set fixed widths and heights.
• Browser Support: Iframes are widely supported in modern browsers. However, providing fallback content (the text between <iframe> and </iframe>) is a good practice.

Understanding how to use iframes allows you to integrate external content into your websites, making them more dynamic and engaging. In the next lesson, we'll cover HTML – Details & Summary for Collapsible Content, which introduces interactive sections that users can expand or collapse.