Skip to content
finote

06. iframe Element

Introduction

Section titled “Introduction”

The <iframe> (inline frame) element embeds another HTML page within the current page. It’s commonly used for embedding videos, maps, social media content, and other external resources. Understanding iframe usage, security considerations, and best practices is important for safe and effective content embedding.

Basic Usage

Section titled “Basic Usage”
<iframe src="https://example.com/page.html"></iframe>

Essential Attributes

Section titled “Essential Attributes”

src

Section titled “src”

Source URL:

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

width and height

Section titled “width and height”

Dimensions:

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

title

Section titled “title”

Accessibility title:

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

Security Attributes

Section titled “Security Attributes”

sandbox

Section titled “sandbox”

Restrict iframe capabilities:

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

allow

Section titled “allow”

Feature policy:

<iframe
    src="https://example.com"
    allow="camera; microphone">
</iframe>

Common Use Cases

Section titled “Common Use Cases”

Embedding Videos

Section titled “Embedding Videos”
<iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    width="560"
    height="315"
    title="YouTube video">
</iframe>

Embedding Maps

Section titled “Embedding Maps”
<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600"
    height="450"
    title="Google Maps">
</iframe>

Best Practices

Section titled “Best Practices”

Always Include title

Section titled “Always Include title”
<iframe src="https://example.com" title="Embedded content"></iframe>

Use sandbox for Untrusted Content

Section titled “Use sandbox for Untrusted Content”
<iframe
    src="https://untrusted.com"
    sandbox="allow-scripts"
    title="Untrusted content">
</iframe>

References

Section titled “References”