HTML <iframe> Tag

The HTML <iframe> (Inline Frame) tag is used to embed another webpage or external content within a web page. It is commonly used for embedding videos, maps, external websites, and interactive widgets.

Basic Syntax

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

Explanation:

  • <iframe> - Defines the inline frame container.
  • src - Specifies the URL of the content to be embedded.
  • width & height - Define the size of the iframe.

    • Common Attributes

    src - Specifies the URL of the embedded content.

    <iframe src="https://example.com">

    width & height - Defines the frame size (in pixels or percentage).

    <iframe width="800" height="600">

    frameborder - Specifies whether the iframe has a border (0 removes it).

    <iframe frameborder="0">

    allowfullscreen - Enables fullscreen mode for videos.

    <iframe allowfullscreen>

    loading - Controls how the iframe loads (lazy defers loading).

    <iframe loading="lazy">

    referrerpolicy - Controls referrer information sharing.

    <iframe referrerpolicy="no-referrer">

    sandbox - Restricts iframe permissions for security.

    <iframe sandbox>

    Embedding Videos with <iframe>

    Embedding a YouTube Video

    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    frameborder="0" allowfullscreen></iframe>

    Key Features:

  • Uses /embed/ instead of /watch?v=.
  • frameborder="0" removes the default border.
  • allowfullscreen enables fullscreen playback.

    • Embedding a Vimeo Video

    <iframe src="https://player.vimeo.com/video/123456789" width="640" height="360"
    frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

    Additional Attribute:

    allow="autoplay; fullscreen" - Enables autoplay and fullscreen.

    Embedding Google Maps

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151..." width="600"
    height="450" style="border:0;" allowfullscreen> </iframe>

    Use Case: Displays an interactive Google Map.

    Security Considerations (sandbox Attribute)

    For security reasons, embedding external content can be risky. The sandbox attribute restricts iframe permissions.

    <iframe src="https://example.com" sandbox></iframe>

    Common Sandbox Values:

  • sandbox="allow-scripts" - Allows scripts to run inside the iframe.
  • sandbox="allow-forms" - Enables form submissions inside the iframe.

    • Example: Full Iframe Implementation

    <iframe src="https://example.com" width="800" height="600" frameborder="0" loading="lazy"
    referrerpolsicy="no-referrer"> Your browser does not support iframes. </iframe>

    Summary

    <iframe> - Defines an inline frame for embedding external content.

    src - Specifies the content URL.

    allowfullscreen - Enables fullscreen mode for videos.

    sandbox - Restricts iframe permissions for security.