HTML Iframes Guide | Nikhil Learn Hub

What is an Iframe?

Definition:

An iframe (<iframe>) is an inline frame used to embed another HTML page inside the current page. It’s commonly used for maps, videos, widgets, and external applications. The embedded page behaves like a “window” into a different document, which can even be hosted on another domain.

Basic Iframe Syntax

Example: Embedding a Website

HTML Code:

<iframe src="https://example.com"
        width="600"
        height="400"
        title="Example Website - Iframes Page">
</iframe>

Common Use Cases

Iframes are very powerful, but should be used carefully. Typical use cases include:

Embedding maps – Google Maps, OpenStreetMap or other location widgets.
Embedding videos – YouTube, Vimeo and other streaming platforms.
Embedding external tools – analytics dashboards, forms hosted by third parties, chat widgets.
Document viewers – PDF, slide decks or online documents.

Embedding YouTube Videos

YouTube provides an embed URL format that works directly inside an iframe. For better performance and UX, include loading="lazy", allowfullscreen, and a meaningful title.

Steps to Include a YouTube Video

Open the video on YouTube that you want to embed.
Click Share below the video, then select Embed.
Copy the generated iframe code.
Paste it into your HTML page where the video should appear.
Add or verify recommended attributes: title, loading="lazy", and allowfullscreen.
Use a responsive wrapper (like Bootstrap ratio) so the video scales on mobile.

Example: YouTube Video Embed

HTML Code:

<div class="ratio ratio-16x9">
    <iframe
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="YouTube video player - Iframes Page"
        loading="lazy"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen>
    </iframe>
</div>

Embedding Google Maps

Google Maps also gives iframe code from the Share → Embed a map option. This is useful for contact pages, branch locations, event venues, and delivery zones.

Steps to Include Google Maps

Open Google Maps and search for the location.
Click Share, then choose Embed a map.
Pick a map size (small, medium, large, or custom).
Copy the iframe HTML provided by Google.
Paste it into your page where the map should display.
Add loading="lazy", a descriptive title, and referrerpolicy for better performance and security.

Example: Google Maps Embed

HTML Code:

<iframe
    src="https://maps.google.com/maps?q=YOUR_LOCATION&output=embed"
    width="100%"
    height="350"
    title="Company office location map - Iframes Page"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    allowfullscreen>
</iframe>

Important Iframe Attributes

src - URL to be embedded.
title - required for accessibility (screen readers).
loading="lazy" - defers off-screen iframe loading.
allow - controls permissions like autoplay/fullscreen.
sandbox - restricts scripts/forms/popups in embedded content.
referrerpolicy - controls how much referrer information is sent.

Secure Iframe Example:

<iframe
    src="https://example.com/widget"
    title="External widget - Iframes Page"
    loading="lazy"
    sandbox="allow-scripts allow-same-origin"
    referrerpolicy="strict-origin-when-cross-origin">
</iframe>

Security & Best Practices

Use the sandbox attribute to restrict what the embedded content can do.
Use loading="lazy" for performance when iframes are below the fold.
Always provide a descriptive title attribute for accessibility.
Avoid iframes for critical SEO content, as search engines may not treat embedded content as part of your page.