Get Started 🚀
← Back to Audio & Video Chapter
Media Types

📺 Embedded Video — YouTube/Vimeo Embed

<iframe src="youtube.com/embed/VIDEO_ID"></iframe>

Apne aap videos host karne ke bajaye, YouTube, Vimeo, ya doosre platforms se <iframe> se embed karo. Jaise apne dukaan ki window mein TV lagana jo doosre ka channel dikhaye — no hosting costs, no bandwidth.

Embed URL use karo (youtube.com/embed/VIDEO_ID, youtube.com/watch?v=VIDEO_ID nahi). loading="lazy" performance ke liye add karo. URL parameters se player behavior control karo: autoplay, loop, controls, modestbranding.

🛺
Dukaan ki Window mein TV: Apna video host karna = TV khareedna, bijli ka bill dena, maintain karna. Embed karna = doosre ke TV ki window lagana — woh sab handle karte hain, tum sirf dikhate ho.

Code Example

HTML — Embedded Video — YouTube/Vimeo Embed
<!-- Basic YouTube embed -->
<iframe 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  width="560" 
  height="315"
  allowfullscreen>
</iframe>

<!-- Saare useful parameters ke saath -->
<iframe 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&mute=0&loop=0&controls=1&modestbranding=1&rel=0" 
  width="560" 
  height="315"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen
  title="YouTube video player">
</iframe>

<!-- Responsive iframe wrapper -->
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen
    title="Video">
  </iframe>
</div>

<!-- Vimeo embed -->
<iframe 
  src="https://player.vimeo.com/video/VIDEO_ID" 
  width="640" 
  height="360"
  allowfullscreen
  title="Vimeo video player">
</iframe>

<!-- YouTube Shorts embed -->
<iframe 
  src="https://www.youtube.com/embed/SHORTS_ID"
  width="315"
  height="560"
  allowfullscreen
  title="YouTube Shorts">
</iframe>
/embed/VIDEO_IDEmbed URL — /watch?v= nahi (watch URL kaam nahi karega)
width/heightDimensions — layout shift prevent karta hai
loading="lazy"Scroll paas aane pe load — bandwidth save karta hai
allowfullscreenFullscreen button enable karta hai
title="..."Accessibility — iframe mein kya hai describe karta hai
allow="..."Video player features ke liye permissions
?autoplay=0URL param — 0=off, 1=on (autoplay ke liye muted zaroori)
?rel=0End mein unrelated videos mat dikhao
?modestbranding=1Player se YouTube logo chhupao
padding-bottom: 56.25%16:9 aspect ratio trick responsive iframes ke liye

✅ When to Use

  • YouTube/Vimeo videos (apne aap host mat karo)
  • Jab zero hosting costs chahiye
  • Jab YouTube ka CDN chahiye (duniya bhar mein fast)
  • Jab YouTube ke player features chahiye (chapters, captions)
  • Social media video embeds

❌ When NOT to Use

  • Private/confidential videos (<video> use karo self-hosting ke saath)
  • Jab player appearance pe full control chahiye
  • Jab offline support chahiye (<video> Service Workers se offline kaam karta hai)
  • Jab YouTube ads acceptable nahi (self-host karo)
💡
Hamesha embed URL use karo (/embed/VIDEO_ID), watch URL nahi (/watch?v=VIDEO_ID). Watch URLs iframes mein kaam nahi karte. End mein unrelated videos hide karne ke liye ?rel=0 add karo. Below-fold videos ke liye loading="lazy" add karo.
← Back to Audio & Video Chapter