HTML यूट्यूब
ऑडियो और वीडियो पाठों ने सिखाया कि अपनी मीडिया फ़ाइलें media/ जैसे फ़ोल्डरों में होस्ट करें। YouTube अलग है: आप उनका स्ट्रीम अपने सर्वर पर डाउनलोड नहीं करते और स्थानीय video को वॉच पेज पर नहीं लगाते। आप उनके प्लेयर को iframe से एम्बेड करते हैं — वही स्निपेट जो YouTube देता है। आपका पेज अपेक्षाकृत हल्का रहता है; भारी प्लेयर UI और वीडियो डेटा नेटवर्क वाले विज़िट पर YouTube सर्वरों से आता है।
एम्बेड का मतलब
एम्बेड किसी अन्य साइट का इंटरैक्टिव पेज (यहाँ प्लेयर) आपके पेज पर आयताकार फ्रेम में रखता है। विज़िटर आपके शीर्षक और पैराग्राफ अभी भी चारों ओर देखता है, लेकिन नियंत्रण, ब्रांडिंग और स्ट्रीम YouTube से आते हैं। इसलिए मार्कअप iframe जैसा लगता है जिसका src youtube.com/embed/... है, न कि स्थानीय video जिसका src="media/clip.mp4" हो। मानसिक रूप से अलग करें: «मैं फ़ाइल होस्ट करता हूँ» बनाम «मैं किसी और का प्लेयर फ्रेम करता हूँ।»
सीधा उत्तर
YouTube पर वीडियो खोलें → Share → Embed → <iframe …> स्निपेट अपने HTML body में चिपकाएँ। समझदार width और height रखें। src उस वीडियो का YouTube एम्बेड URL है। आधिकारिक डायलॉग पसंद करें ताकि अनुमतियाँ, URL आकार और सुझाए गए गुण सही रहें — चैट लिंक से अनुमान लगाने के बजाय।
आधिकारिक iframe पैटर्न
VIDEO_ID को YouTube की असली id से बदलें (Share → Embed पहले से भर देता है)। नीचे का नमूना एक-दो बार कॉपी के बाद परिचित शुरुआती आकार दिखाता है। इसे समझने का पैटर्न मानें, शून्य से एम्बेड होस्ट गढ़ने का कारण नहीं।
YouTube embed iframe (example pattern)
html<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allowfullscreen>
</iframe>
एम्बेड नमूने को पढ़ना
iframeथर्ड-पार्टी प्लेयर क्षेत्र बनाता हैsrcएम्बेड URL रूप होना चाहिए (/embed/VIDEO_ID), सिर्फ सामान्य वॉच पेज नहींwidthऔरheightजगह आरक्षित करते हैं ताकि लोड पर लेआउट न उछलेtitleसहायक तकनीकों के लिए फ्रेम नाम देता है — खाली या बेतुका न छोड़ेंallowfullscreenहोस्ट और ब्राउज़र अनुमति दें तो विस्तार देता है- नए स्निपेट में
allowआदि भी हो सकते हैं — आधिकारिक डायलॉग जो दे वही रखें - पहले Share → Embed से चिपकाएँ; फिर कॉलम जरूरत हो तो आकार ठीक करें
शुरुआती कॉपी क्यों करें, गढ़ें नहीं
src में वॉच URL हाथ से लिखना, क्वेरी गढ़ना, या गलत गुण में youtu.be शॉर्ट लिंक डालना अक्सर खाली बॉक्स देता है। Embed डायलॉग वर्तमान प्लेयर जरूरतों से मेल खाता URL और गुण देता है। एक सफल पेस्ट के बाद पैटर्न दिखता है और आप आयाम सोच-समझकर बदल सकते हैं।
पेज तोड़े बिना आकार
क्लासिक शुरुआती आकार जैसे 560 गुणा 315 परिचित 16:9 देते हैं। बहुत छोटा iframe नियंत्रण छिपाता है; बहुत बड़ा छोटी स्क्रीनOverflow कर सकता है। आधिकारिक आकार से शुरू करें, संकरी कॉलम हो तो थोड़ा घटाएँ। बाद के CSS पाठ धाराप्रवाह एम्बेड सिखाते हैं; यहाँ लक्ष्य काम करता पठनीय प्लेयर है।
थर्ड-पार्टी लागत और गोपनीयता
YouTube एम्बेड Google सर्वरों पर नेटवर्क अनुरोध जोड़ता है। ब्राउज़र, क्षेत्र और प्लेयर विकल्पों के अनुसार कुकीज़ आदि शामिल हो सकते हैं। आपका पेज YouTube उपलब्ध रहने और वीडियो एम्बेडयोग्य रहने पर भी निर्भर करता है। कई सार्वजनिक ट्यूटोरियल के लिए ठीक है। निजी कक्षा क्लिप के लिए स्व-होस्टेड video अक्सर साफ होता है। जानबूझकर चुनें: एम्बेड जब क्लिप पहले से YouTube पर हो; होस्ट जब पूरी फ़ाइल नियंत्रण चाहिए।
YouTube बनाम video बनाम audio
- क्लिप पहले से YouTube पर, उनका प्लेयर → Share → Embed से
iframeएम्बेड - अपना MP4/WebM सर्वर पर →
controlsवालाvideo - अपनी ध्वनि फ़ाइल →
controlsवालाaudio
स्थानीय MP4 को YouTube iframe में न लपेटें। वॉच URL कोvideoकेsrcमें न डालें और नेटिव HTML प्लेयर की उम्मीद न करें। उपकरण को मीडिया के स्थान से मिलाएँ।
एम्बेड के लिए पहुँच आदतें
iframe को वीडियो विषय पर स्पष्ट title दें। चारों ओर ऐसा पाठ रखें जो बताए क्लिप क्यों है। अगर बोली गई सामग्री पाठ के लिए जरूरी है, ट्रांसक्रिप्ट लिंक करें या सार चिपकाएँ — अकेला फ्रेम अच्छे पैराग्राफ की जगह नहीं लेता।
संपादक में अभ्यास
- कोई सार्वजनिक YouTube वीडियो खोलें जिसे अभ्यास के लिए एम्बेड करने की अनुमति हो।
- Share → Embed से पूरा iframe स्निपेट कॉपी करें।
bodyमें क्लिप नाम वाले छोटे शीर्षक के नीचे चिपकाएँ।- स्थानीय पेज (नेटवर्क के साथ) खोलें और प्लेयर लोड जाँचें।
width/heightथोड़ा बदलें और लेआउट फिर देखें।- अर्थपूर्ण
titleरखें और एक संदर्भ वाक्य लिखें।
आसान गलतियाँ
- गलत एम्बेड URL लिखना या वॉच लिंक
srcमें चिपकाना - iframe पर उपयोगी
titleभूलना - लेआउट जाँचे बिना iframe बहुत छोटा/बड़ा करना
- YouTube एम्बेड को स्व-होस्टेड
video/audioसे मिलाना - बिना YouTube नेटवर्क के iframe की उम्मीद
- आसपास का पाठ हटाकर सिर्फ प्लेयर पर निर्भर रहना
- मान लेना हर वीडियो एम्बेड अनुमति देता है
- सिर्फ वॉच URL पैराग्राफ में कॉपी कर «एम्बेड» कहना
सारांश
- YouTube एम्बेड एम्बेड URL वाले
iframeका उपयोग करते हैं - सही स्निपेट के लिए Share → Embed पसंद करें
- प्लेयर सोच-समझकर आकार दें और स्पष्ट
titleरखें - याद रखें यह थर्ड-पार्टी सामग्री है, डिस्क पर स्थानीय फ़ाइल नहीं
- फ़ाइल स्वयं होस्ट हो तो
video/audio; प्लेयर YouTube होस्ट करे तो iframe
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी