HTML में iFrame में एक ऐसा element है जो हमें एक वेब पेज के अंदर दूसरा वेब पेज या किसी अन्य documents को display करने की सुविधा देता है। iFrame का पूरा नाम inline frame होता है।
दूसरे शब्दों में कहें तो, ” HTML में iFrame एक ऐसा tool है जिसका इस्तेमाल किसी एक वेबपेज के अंदर किसी दूसरी website, video, या map को दिखाने के लिए किया जाता है।”
Iframe का उपयोग तब किया जाता है जब हमें किसी अन्य वेबसाइट या content को हमारे पेज के अंदर दिखाना होता है। उदाहरण के लिए, यदि आप अपने वेब पेज पर YouTube वीडियो या Google Map दिखाना चाहते हैं, तो आप Iframe का उपयोग कर सकते हैं।
iframe का सिंटैक्स (Syntax)
HTML में iframe का उपयोग करने के लिए <iframe> टैग का उपयोग किया जाता है। इसका बेसिक सिंटैक्स नीचे दिया गया है:-
<iframe src="https://www.example.com" width="600" height="400"></iframe>- src: इसमें आप उस वेबपेज या डॉक्यूमेंट का URL डालते हैं जिसे आप दिखाना चाहते हैं।
- width: यह iframe की चौड़ाई (Width) सेट करने के लिए use किया जाता है।
- height: यह iframe की ऊँचाई (Height) सेट करने के लिए use किया जाता है।
इसका उदाहरण:
<iframe src="https://www.example.com" width="600" height="400"></iframe>इस उदाहरण में, https://www.example.com वेबसाइट का कंटेंट 600 pixel चौड़ाई और 400 pixel ऊँचाई के iframe में दिखाया जाएगा।
iframe के Attributes
1:- title: इसका इस्तेमाल iframe का title सेट करने के लिए किया जाता है।
<iframe src="https://www.ehindistudy.com" title="eHindiStudy Website"></iframe>2:- frameborder:– इसका इस्तेमाल border को सेट करने और border को हटाने के लिए किया जाता है। frameborder=”0″ से बॉर्डर हट जाता है। frameborder=”1″ से बॉर्डर set हो जाता है।
<iframe src="https://www.example.com" frameborder="0"></iframe>3:- allowfullscreen: अगर आप iframe में वीडियो दिखाना चाहते हैं और उसे fullscreen मोड में चलाना चाहते हैं, तो इस एट्रिब्यूट का उपयोग करें।
<iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>4:- width: यह Iframe की चौड़ाई set करता है।
5:- height: यह Iframe की ऊंचाई set करता है।
6:- src: यह Iframe में जो पेज या URL दिखाना है, उसे निर्धारित करता है।
Iframe के कुछ उदाहरण
Example 1: YouTube वीडियो Embed करना
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>यह उदाहरण YouTube वीडियो को आपके पेज में दिखाएगा।
Example 2: Google Maps Embed करना
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" loading="lazy"></iframe>यह उदाहरण Google Map को आपके पेज में दिखाएगा।
iframe का उपयोग करते समय ध्यान रखने योग्य बातें
- सुरक्षा (Security): iframe का उपयोग करते समय सुरक्षा का ध्यान रखें। अगर आप किसी अनजान वेबसाइट का कंटेंट embed करते हैं, तो यह आपके वेबपेज को नुकसान पहुँचा सकता है।
- रिस्पॉन्सिव डिज़ाइन (Responsive Design): iframe को रिस्पॉन्सिव बनाने के लिए CSS का उपयोग करें, ताकि यह मोबाइल डिवाइस पर भी अच्छे से दिखे।
- लोडिंग टाइम: iframe का उपयोग करने से वेबपेज का loading time बढ़ सकता है। इसलिए, जरूरत पड़ने पर ही iframe का उपयोग करें।
इसे पढ़ें:–