HTML Iframes

iframe (Inline Frame) का इस्तेमाल किसी एक webpage के अंदर दूसरा webpage दिखाने के लिए किया जाता है। आप चाहें तो अपनी साइट में YouTube वीडियो, Google Maps, या कोई दूसरी वेबसाइट embed कर सकते हैं। यह HTML element ऐसा frame बनाता है जिसमें एक और HTML document दिखाई देता है।

Basic Syntax

<iframe src="URL"></iframe>

Example:

<iframe src="https://www.wikipedia.org"></iframe>

यह आपके पेज पर Wikipedia का homepage दिखाएगा (अगर वेबसाइट embedding allow करती है)।

Iframe की Basic Attributes

src - जिस webpage को दिखाना है उसका URL।
width और height - Iframe की चौड़ाई और ऊँचाई तय करते हैं।
title - Accessibility के लिए एक title देना अच्छा होता है।
style - Inline CSS के लिए।

Example:

<iframe 
  src="https://example.com" 
  width="600" 
  height="400" 
  title="Example Website">
</iframe>

Output: 600×400 size का frame जिसमें example.com खुलेगा।

Iframe में YouTube Video Embed करना

सबसे common use case — YouTube video दिखाना

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allowfullscreen>
</iframe>

allowfullscreen वीडियो को fullscreen में देखने देता है।
frameborder="0" बॉर्डर हटाता है।

Iframe में Google Map Embed करना

आप किसी लोकेशन का Map भी embed कर सकते हैं। Example:

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!..." 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen 
  loading="lazy" 
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

इससे आपका webpage पर live Google Map दिखेगा।

Iframe में Local HTML File दिखाना

अगर आपकी वेबसाइट में ही कोई दूसरी HTML file है, तो आप उसे भी iframe में दिखा सकते हैं। Example:

<iframe src="about.html" width="700" height="400" title="About Us"></iframe>

Output: आपकी site की “about.html” file iframe में खुलेगी।

Iframe को Style देना (CSS के साथ)

आप iframe को सुंदर layout में design कर सकते हैं। Example:

<style>
iframe {
  border: 2px solid #4caf50;
  border-radius: 10px;
  box-shadow: 0 0 10px gray;
}
</style>

<iframe src="https://www.wikipedia.org" width="700" height="400" title="Wiki"></iframe>

Output: Border, shadow और rounded corner के साथ सुंदर iframe।

Responsive Iframe (Mobile Friendly)

Mobile या small screens पर iframe को responsive बनाना बहुत जरूरी है। Example:

<style>
.responsive-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

<div class="responsive-frame">
  <iframe 
    src="https://www.youtube.com/embed/ysz5S6PUM-U" 
    title="Responsive Video"
    allowfullscreen>
  </iframe>
</div>

Output: Iframe अपने device की screen के अनुसार size बदल लेगा।

Iframe के Security Attributes

कुछ attributes iframe को secure बनाते हैं:

<table>
        <thead>
            <tr>
                <th>Attribute</th>
                <th>उपयोग (Use)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b>sandbox</b></td>
                <td><code>iframe</code> को अलग environment में चलाता है (JavaScript आदि को restrict करता है)</td>
            </tr>
            <tr>
                <td><b>allowfullscreen</b></td>
                <td>fullscreen mode की अनुमति देता है</td>
            </tr>
            <tr>
                <td><b>loading="lazy"</b></td>
                <td><code>iframe</code> को तभी load करता है जब user उसे देखने वाला हो (performance बढ़ती है)</td>
            </tr>
            <tr>
                <td><b>referrerpolicy</b></td>
                <td>referrer data को control करता है</td>
            </tr>
        </tbody>
    </table>

Example (Secure iframe):

<iframe 
  src="https://example.com" 
  sandbox 
  loading="lazy"
  width="600" 
  height="400"
  title="Safe Frame">
</iframe>

Practical Example – 3 Iframes एक साथ

<h2>Multiple Iframes Example</h2>

<iframe src="about.html" width="300" height="200" title="About"></iframe>
<iframe src="https://www.wikipedia.org" width="300" height="200" title="Wiki"></iframe>
<iframe src="https://www.google.com" width="300" height="200" title="Google"></iframe>

Output: तीन अलग-अलग webpages एक ही page पर side-by-side दिखेंगे।

Summary

Feature (विशेषता)	Description (विवरण)
iframe	किसी webpage के अंदर दूसरा webpage दिखाने के लिए
Common Uses	YouTube video, Google Map, ads, embedded tools
Important Attributes	src, width, height, title, allowfullscreen, sandbox, loading
Styling	Border, shadow, responsive layout
Performance Tip	loading="lazy" से page तेज load होता है

Practice Task

एक HTML page बनाइए जिसमें:

एक iframe में आपका “About Us” page दिखे,
दूसरा iframe में YouTube video,
और तीसरा iframe में Google Map।

फिर इन तीनों को CSS से सुंदर layout में design कीजिए।