HTML iframe टैग एक वेब दस्तावेज़ को वेब पेज पर एम्बेड करता है। एक एम्बेडेड दस्तावेज़ एक PDF, एक वेब पेज, या कोई अन्य एसेट हो सकता है। `src` एट्रिब्यूट एम्बेडेड संसाधन का स्थान परिभाषित करता है।
आप HTML का उपयोग करके एक वेब दस्तावेज़ की सामग्री, जैसे PDF या Google Maps से मैप, को किसी अन्य पेज पर एम्बेड कर सकते हैं।
यहीं HTML `
HTML iframe
HTML iframe, या इंलाइन फ्रेम, एक पेज पर बाहरी वेब दस्तावेज़ प्रदर्शित करते हैं। आप `
इंलाइन फ्रेम के भीतर संग्रहीत कोड बाकी वेब पेज से स्वतंत्र होता है। कोई भी स्टाइल या JavaScript जो आपके वेब पेज पर लागू होता है, iframe के भीतर लागू नहीं होगा।
HTML `
<iframe src="url"></iframe>
`
iframe HTML कोड उदाहरण
आइए एक उदाहरण के माध्यम से देखें कि `
मान लीजिए हम वाशिंगटन, D.C. के एक स्थानीय ऐतिहासिक सोसायटी के लिए एक वेबसाइट बना रहे हैं। वे चाहते हैं कि हम Khan Academy से अमेरिकी संविधान के जन्म पर एक एम्बेडेड वीडियो के साथ एक पेज बनाएं। यह पेज सोसायटी में शामिल होने में रुचि रखने वाले किसी भी व्यक्ति के लिए अनुशंसित सामग्री है। हम अपनी वेबसाइट में वीडियो एम्बेड करने के लिए निम्न कोड का उपयोग कर सकते हैं:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
हमारा कोड लौटाता है:

हमने एक बाहरी वेब संसाधन को अपने वेब पेज पर एम्बेड करने के लिए `
HTML Iframe ऊंचाई और चौड़ाई
`height` एट्रिब्यूट और `width` एट्रिब्यूट का उपयोग iframe का आकार सेट करने के लिए किया जाता है। मान लीजिए स्थानीय वाशिंगटन D.C. ऐतिहासिक सोसायटी चाहती है कि हम उनकी साइट पर वीडियो को बड़ा करें।
हम YouTube वीडियो की चौड़ाई 500 पिक्सेल और ऊंचाई 300 पिक्सेल सेट करने जा रहे हैं:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
हमारा कोड लौटाता है:

हमारा एम्बेडेड वीडियो अब हमारे HTML दस्तावेज़ पर 500 पिक्सेल चौड़ा और 300 पिक्सेल लंबा है। इससे लोगों के लिए वेबसाइट पर हमारे वीडियो को देखना आसान हो जाता है।
वैकल्पिक रूप से, हम CSS का उपयोग करके iframe टैग की चौड़ाई और ऊंचाई सेट कर सकते हैं। लेकिन, क्योंकि HTML `height` और `weight` एट्रिब्यूट का समर्थन करता है, यह आवश्यक नहीं है।
HTML iframe बॉर्डर हटाएं
जब आप `
ऐतिहासिक सोसायटी ने हमें उनकी साइट से YouTube वीडियो के चारों ओर का बॉर्डर हटाने के लिए कहा है। बॉर्डर हटाने के लिए हम जिस कोड का उपयोग करेंगे वह यहाँ है:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>
हमारा कोड लौटाता है:

हमारे वीडियो में अब बॉर्डर नहीं है।
HTML iframe लिंक टारगेट
इसके अलावा, `
मान लीजिए ऐतिहासिक सोसायटी के पास एक और वीडियो था जिसे वे अपनी वेबसाइट पर अमेरिकी संविधान के अनुच्छेद I पर दिखाना चाहते थे। यह वीडियो भी Khan Academy द्वारा प्रकाशित किया गया था।
जब वेब पेज पर Birth टेक्स्ट पर क्लिक किया जाता है, तो Birth of the U.S. Constitution वीडियो iframe में रेंडर होना चाहिए। जब Article I टेक्स्ट पर क्लिक किया जाता है, तो संविधान के अनुच्छेद I पर वीडियो रेंडर होना चाहिए।
हम इस कार्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br /> <a href="https://www.youtube.com/embed/Rk8dCnKIfP" target="iframe1">Birth</a><br /> <a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Article I</a>
हमारा कोड लौटाता है:

डिफ़ॉल्ट रूप से, अमेरिकी संविधान के जन्म पर वीडियो iframe में दिखाया जाता है। iframe की सामग्री Khan Academy से संविधान के अनुच्छेद I पर वीडियो की ओर इंगित करने के लिए बदल जाती है। यह तब होता है जब हम Article I URL पर क्लिक करते हैं।
यदि वह वीडियो पहले से प्रदर्शित नहीं है तो जब हम Birth पर क्लिक करते हैं तो हमारा iframe संविधान के जन्म पर वीडियो पर रीडायरेक्ट हो जाता है।
निष्कर्ष
HTML `
यह ट्यूटोरियल उदाहरणों के संदर्भ में चर्चा करता है कि वेब पेज पर बाहरी वेब संसाधनों को रेंडर करने के लिए HTML `
HTML में कोडिंग के बारे में अधिक जानने के लिए, हाइपरटेक्स्ट मार्कअप लैंग्वेज सीखने का हमारा गाइड पढ़ें।