HTML `<iframe>`:

What is an HTML `<iframe>`?

✔ The <iframe> (inline frame) tag is used to embed another webpage within a current webpage.
✔ It allows you to display external websites, maps, videos, or documents inside a frame on your site.
✔ The <iframe> element creates a separate browsing context, meaning it operates independently from the main page.

1️⃣ Basic Syntax of `<iframe>`

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

✔ The src attribute specifies the URL of the webpage to embed.
✔ The width and height attributes define the size of the iframe.

2️⃣ Example: Embedding a Website using `<iframe>`

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

✔ This will display example.com inside the frame with a size of 600x400 pixels.

3️⃣ Example: Embedding Google Maps

<iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509123!2d144.96305791532108!3d-37.81410797975171!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0x5045675218ce6e0!2sMelbourne%2C%20Australia!5e0!3m2!1sen!2sus!4v1645685692824" 
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy">
</iframe>

✔ This embeds Google Maps at the specified location.

4️⃣ Example: Embedding a YouTube Video

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>

✔ This embeds a YouTube video with playback controls.

5️⃣ Attributes of `<iframe>`

Attribute	Description
`src`	Defines the URL of the embedded content.
`width`	Sets the width of the iframe (in pixels or percentage).
`height`	Sets the height of the iframe (in pixels or percentage).
`frameborder`	Controls the iframe border (0 = no border, 1 = border).
`allowfullscreen`	Enables fullscreen mode for videos.
`loading="lazy"`	Delays loading until the iframe is visible on the screen.
`sandbox`	Restricts iframe content for security purposes.
`allow`	Specifies which features (e.g., autoplay, camera, microphone) are allowed inside the iframe.

6️⃣ Security Considerations with `<iframe>`

🚨 Iframes can be risky because they allow embedding external content that may contain malicious code.

✔ Use the sandbox attribute to restrict iframe content:

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

✔ This prevents the iframe from executing scripts or accessing cookies.

✔ Use CSP (Content Security Policy) to prevent clickjacking attacks.

7️⃣ When to Use `<iframe>`?

✅ Embedding Google Maps, YouTube videos, or external services.
✅ Displaying third-party widgets (like chatbots or payment gateways).
✅ Showing content from other websites without redirecting users.

Conclusion

The <iframe> tag is a useful tool for embedding external content in a webpage. However, it should be used carefully, keeping security and performance in mind.

HTML

HTML <iframe>:

What is an HTML <iframe>?

1️⃣ Basic Syntax of <iframe>

2️⃣ Example: Embedding a Website using <iframe>