HTML <iframe> element का उपयोग एक web page के अंदर दूसरा web page embed करने के लिए किया जाता है।
Iframe का मतलब है Inline Frame।
Iframe क्या होता है
<iframe> एक container होता है जो किसी external या internal webpage को current page के अंदर show करता है।
यह independent document की तरह behave करता है।
Iframe के common uses:
YouTube videos embed करना
Google Maps embed करना
External pages preview करना
Ads और widgets दिखाना
Iframe का Basic Syntax
<iframe src="page.html"></iframe>
src attribute उस page का URL होता है जिसे embed करना है।
Simple Iframe Example
<iframe src="https://example.com"></iframe>
यह example.com को आपके page के अंदर show करेगा।
Iframe Width और Height
Iframe का size control करने के लिए width और height attributes use किए जाते हैं।
<iframe src="page.html" width="600" height="400"></iframe>
यह iframe का visible area define करता है।
Border Remove करना
By default iframe के around border हो सकता है।
<iframe src="page.html" style="border:none;"></iframe>
Modern design में border remove करना common है।
Iframe के साथ YouTube Video
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ">
</iframe>
YouTube videos embed करने के लिए iframe सबसे common तरीका है।
Iframe में Title Attribute
Accessibility के लिए iframe में title attribute देना जरूरी है।
<iframe src="page.html" title="Website Preview"></iframe>
Screen readers के लिए यह बहुत helpful होता है।
Iframe Responsive बनाना
Responsive layout के लिए iframe को CSS से control किया जाता है।
<style>
.iframe-box {
width: 100%;
height: 400px;
}
</style>
<iframe src="page.html" class="iframe-box"></iframe>
Mobile screens पर proper display के लिए यह जरूरी है।
Iframe और Target Attribute
Iframe को link target की तरह use किया जा सकता है।
<iframe name="myFrame"></iframe>
<a href="page.html" target="myFrame">Open Page</a>
Link click करने पर page iframe के अंदर load होगा।
Iframe Sandbox Attribute
Security के लिए sandbox attribute use किया जाता है।
<iframe src="page.html" sandbox></iframe>
Sandbox iframe की permissions limit कर देता है।
Specific permissions देने के लिए:
<iframe src="page.html" sandbox="allow-scripts allow-forms"></iframe>
Iframe Allow Attribute
Modern browsers में permissions control करने के लिए allow attribute use होता है।
<iframe
src="video.html"
allow="autoplay; fullscreen">
</iframe>
यह multimedia content के लिए useful है।
Iframe और Same-Origin Policy
Iframe में loaded page का content:
JavaScript से access नहीं किया जा सकता
अगर वह same domain का नहीं है
यह browser security rule है।
Iframe के Limitations
SEO के लिए iframe content count नहीं होता
External content पर control limited होता है
Performance impact हो सकता है
इसलिए iframe का limited और proper use करना चाहिए।
Common Mistakes
Iframe बिना title attribute के use करना
Too many iframes add करना
Responsive behavior ignore करना
Untrusted sources embed करना
Best Practices
Iframe में हमेशा title दें
Trusted sources ही embed करें
Responsive styling apply करें
Unnecessary iframes avoid करें
Summary
HTML <iframe> element external pages और content embed करने के लिए use होता है।
यह videos, maps और widgets के लिए बहुत useful है।
Proper sizing, accessibility और security के साथ iframe का use professional web pages बनाता है।