Prev Next

HTML Iframes

An <iframe> (inline frame) is used to embed another HTML page within your current page. Common uses include embedding videos, maps, or external websites. Iframes maintain their own browsing context, allowing independent scrolling, navigation, and interaction without affecting the parent page.

Key Topics

Basic Iframe Usage

Example: Embedding an external webpage using <iframe>.

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

Common Iframe Attributes

Example: Using attributes like frameborder, allowfullscreen, or loading="lazy".

<iframe src="video.html" frameborder="0" allowfullscreen width="560" height="315"></iframe>

Iframe Example

This example demonstrates embedding a YouTube video via an iframe. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Iframe Example</title>
</head>
<body>
    <h1>Embedded Video</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Explanation: The iframe above embeds a YouTube video, allowing users to play and interact with it without leaving your page.

Key Takeaways

  • <iframe> embeds external content into your webpage.
  • Adjust width and height to control the display area.
  • Attributes like allowfullscreen enhance user experience.
  • Use iframes for maps, videos, or widgets from external services.
  • Ensure external content is trusted and secure before embedding.
Prev Next