📘 Lesson · Lesson 14

iframe – Embed YouTube and Maps

iframe – YouTube और Maps Embed

What is an iframe?

An iframe (inline frame) is a window in your wall — through it, visitors see ANOTHER website living inside your page: a YouTube video, a Google Map, a PDF. The other site stays fully independent (its own scrolling, its own buttons); your page just provides the window frame.

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

[a 600x400 window showing example.com, live and scrollable, inside your page]

Embed a YouTube Video — the real 3 steps

STEP 1: On the YouTube video → Share → Embed
STEP 2: Copy the code YouTube gives you:

<iframe width="560" height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="School annual day video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media"
    allowfullscreen>
</iframe>

STEP 3: Paste anywhere in your <body>. Done - video plays on YOUR page.

The URL detail that breaks everything: embed URLs use /embed/VIDEO_ID — NOT the normal /watch?v=VIDEO_ID address. Pasting the watch URL into an iframe gives "refused to connect". Always take the code from the Share → Embed button, never from the address bar.

Embed Google Maps — same pattern

STEP 1: Google Maps → search your place (e.g. your school)
STEP 2: Share → "Embed a map" → COPY HTML
STEP 3: Paste:

<iframe src="https://www.google.com/maps/embed?pb=..."
    width="600" height="450" style="border:0"
    allowfullscreen loading="lazy">
</iframe>

This is THE most requested feature on school/business websites — "add our location map to the contact page" — and now you can do it in two minutes. Note loading="lazy": the map loads only when the visitor scrolls near it, keeping the page fast.

Attributes that Matter

Attribute	Job
src	URL of the page/video/map to show
width / height	Window size (reserve space — same layout-shift logic as images)
title	Describes the frame for screen readers — accessibility requirement
allowfullscreen	Lets the video go fullscreen
loading="lazy"	Load only when scrolled into view — free speed
frameborder="0"	Old attribute removing the border (CSS border:0 is the modern way; YouTube still includes it)

Security and Limits — why some sites refuse

<iframe src="https://www.google.com"></iframe>
→ shows: "www.google.com refused to connect"

Sites can forbid being iframed (X-Frame-Options header) — Google, Facebook, most banks do, to prevent clickjacking (an attacker hiding a bank button under a fake "Win a Prize" button on their page).
So: embeddable things provide an official embed URL (YouTube /embed/, Maps /maps/embed) — use those, not the normal page URL.
Only embed content you trust — an iframe is literally another site running inside yours.
Too many iframes = slow page (each one is a full extra webpage loading). One or two per page, lazy-loaded, is the healthy limit.

iframe क्या है?

iframe (inline frame) आपकी दीवार में एक खिड़की है — उससे visitors आपके page के अंदर बसी DOOSRI website देखते हैं: YouTube video, Google Map, PDF. दूसरी site पूरी तरह आज़ाद रहती है (अपनी scrolling, अपने buttons); आपका page बस खिड़की का frame देता है.

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

[आपके page के अंदर 600x400 की खिड़की जिसमें example.com live और scrollable दिखती है]

YouTube Video Embed — असली 3 steps

STEP 1: YouTube video par → Share → Embed
STEP 2: YouTube jo code de use COPY karo:

<iframe width="560" height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="School annual day video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media"
    allowfullscreen>
</iframe>

STEP 3: Apne <body> me kahin bhi paste karo. Done - video AAPKE page par chalta hai.

URL की वह detail जो सब तोड़ देती है: embed URLs में /embed/VIDEO_ID होता है — normal /watch?v=VIDEO_ID address NAHI. Watch URL iframe में डालने पर "refused to connect" मिलता है. Code हमेशा Share → Embed button से लीजिए, address bar से कभी नहीं.

Google Maps Embed — वही pattern

STEP 1: Google Maps → apni jagah search karo (jaise apna school)
STEP 2: Share → "Embed a map" → COPY HTML
STEP 3: Paste:

<iframe src="https://www.google.com/maps/embed?pb=..."
    width="600" height="450" style="border:0"
    allowfullscreen loading="lazy">
</iframe>

School/business websites की सबसे ज़्यादा मांगी जाने वाली चीज़ यही है — "contact page पर हमारी location का map लगा दो" — और अब आप दो minute में कर सकते हैं. loading="lazy" note कीजिए: map तभी load होता है जब visitor उसके पास scroll करे — page तेज़ रहता है.

काम के Attributes

Attribute	काम
src	दिखाने वाले page/video/map का URL
width / height	खिड़की का size (जगह reserve — images वाला ही layout-shift logic)
title	Screen readers के लिए frame का परिचय — accessibility requirement
allowfullscreen	Video को fullscreen जाने देता है
loading="lazy"	View में scroll होने पर ही load — free speed
frameborder="0"	Border हटाने वाला पुराना attribute (modern तरीका CSS border:0; YouTube अब भी देता है)

Security और सीमाएं — कुछ sites मना क्यों करती हैं

<iframe src="https://www.google.com"></iframe>
→ dikhta hai: "www.google.com refused to connect"

Sites iframe होने से मना कर सकती हैं (X-Frame-Options header) — Google, Facebook, ज़्यादातर banks करती हैं, clickjacking रोकने को (attacker अपने page पर नकली "Win a Prize" button के नीचे bank का button छुपा दे).
इसलिए: embed होने वाली चीज़ें official embed URL देती हैं (YouTube /embed/, Maps /maps/embed) — वही use कीजिए, normal page URL नहीं.
सिर्फ भरोसे वाला content embed कीजिए — iframe सचमुच आपके अंदर चलती दूसरी site है.
बहुत सारे iframes = धीमा page (हर एक पूरी extra webpage है). हर page पर एक-दो, lazy-loaded — यही healthy limit.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.