HTML Iframe: YouTube, मैप और पेज अंदर दिखाएँ
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
एक iframe (inline frame) आपकी page के अंदर दूसरी web page को एक छोटी window में दिखाता है। YouTube video, Google Maps और ऐसी ही embedded content इसी से websites पर दिखती है।
Tag है <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315"></iframe>। src वह page है जिसे दिखाना है; width और height window का size तय करते हैं।
आम उपयोग
- YouTube video — किसी भी video पर Share → Embed दबाएँ और iframe code copy कर लें।
- Google Maps — Share → Embed a map से map लगाएँ, और visitor आपकी page छोड़े बिना map को घुमा और zoom कर सकता है।
- दूसरी pages — कोई form, document या दूसरी site की page दिखाना।
ध्यान रखने वाली बातें
एक iframe पूरी दूसरी page load करता है, इसलिए आपकी page धीमी हो जाती है — इसे सिर्फ तभी इस्तेमाल करें जब ज़रूरत हो। कुछ websites iframe के अंदर दिखने से मना कर देती हैं (वे एक header भेजती हैं जो इसे रोक देता है)। और सुरक्षा के लिए, iframe दूसरी site की scripts चला सकता है, इसलिए सिर्फ भरोसेमंद sources की content ही embed करें। sandbox attribute से आप सीमित कर सकते हैं कि embedded page क्या कर सकती है।
title attribute दें (जैसे, title="YouTube video player")। Screen reader उसे पढ़कर सुनाते हैं, जिससे blind visitor को पता चलता है कि frame में क्या है।Iframe क्या है
एक <iframe> आपकी page के अंदर एक window है जो दूसरी web page दिखाती है। दूसरी page आपकी page पर एक rectangle के अंदर load होती है, और ऐसे काम करती है जैसे visitor ने उसे अपने tab में खोला हो। YouTube video, Google Maps और payment pages इसी तरह दूसरी websites के अंदर रखे जाते हैं।
याद रखने की तरकीब: iframe = पेज के अंदर पेज।
Iframe के attributes
| एट्रिब्यूट | मान | विवरण |
|---|---|---|
src | एक web address | Frame के अंदर दिखाने वाली page। ज़रूरी है। |
width / height | pixels या % | आपकी page पर frame का size। |
title | text | Screen reader के लिए frame का विवरण। हमेशा जोड़ें। |
loading | lazy | Frame तभी load होता है जब user उसके पास scroll करता है। |
allowfullscreen | — | Frame वाली page को full screen जाने देता है (video के लिए ज़रूरी)। |
sandbox | — | Frame के अंदर scripts, form और popup रोकता है — ज़्यादा सुरक्षा। |
आम तरीके से embed किया गया YouTube video ऐसा दिखता है:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" allowfullscreen></iframe>
loading="lazy" जोड़ें। जिस map या video तक visitor ने scroll ही नहीं किया है, उसे आपकी page के पहले paint को धीमा नहीं करना चाहिए।आम गलतियाँ
titleattribute भूल जाना — screen reader user को तब सिर्फ "frame" सुनाई देता है, और पता नहीं चलता कि अंदर क्या है।- बिना
sandboxके किसी ऐसी site को embed करना जिस पर भरोसा नहीं है — frame वाली page आपके visitor के browser में scripts चला सकती है। - बहुत छोटी fixed height रखना — frame वाली page के अंदर scrollbar के अंदर scrollbar बन जाती है, जिसे इस्तेमाल करना बहुत बुरा लगता है।
- अपनी ही pages दिखाने के लिए iframe इस्तेमाल करना — link या server-side include लगभग हमेशा बेहतर चुनाव होता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Iframes</title>
</head>
<body>
<h1>Watch Our Intro</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. iframe क्या होता है?
यह आपके पेज के अंदर एक खिड़की है जिसमें दूसरा वेब पेज दिखता है; इसका इस्तेमाल YouTube वीडियो, Google Maps और दूसरे एम्बेडेड कंटेंट के लिए होता है।
2. iframe में खाली बॉक्स क्यों दिखता है?
कुछ वेबसाइट फ्रेमिंग रोकने वाला हेडर भेजती हैं, जिससे ब्राउज़र खाली बॉक्स दिखाता है; इसमें आपके कोड की कोई गलती नहीं होती।
3. iframe में हमेशा क्या जोड़ना चाहिए?
title एट्रिब्यूट, ताकि स्क्रीन रीडर बता सकें कि फ्रेम के अंदर क्या है।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
