Embedding External Content
<iframe src="url"> kisi doosre page/website ko current page ke andar embed karta hai — YouTube videos, Google Maps, payment widgets embed karne ka common tareeka. iframe ka content apna alag "document" hai — apna DOM, apna JavaScript context, parent page se isolated (security ke liye important).
sandbox attribute se iframe ki capabilities restrict kar sakte ho (jaise scripts na chalne dena) — untrusted content embed karte waqt security ke liye important.
<!-- YouTube video embed: -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video"
allowfullscreen>
</iframe>
<!-- Google Maps embed: -->
<iframe src="https://www.google.com/maps/embed?..." width="600" height="450"></iframe>
<!-- Sandboxed — restricted capabilities: -->
<iframe src="untrusted-content.html" sandbox="allow-scripts"></iframe>- iframe = doosri website/page ko current page ke andar embed karo
- Common uses: YouTube videos, Maps, payment widgets
- sandbox attribute = untrusted content ke liye security restrictions
iframes page load ko slow kar sakte hain (extra HTTP requests, extra rendering). loading="lazy" iframes par bhi kaam karta hai — jaise images, sirf tab load hote hain jab user unke kareeb scroll kare.
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
loading="lazy"
title="YouTube video">
</iframe>iframe simple hai (bas embed URL daal do), lekin limited control deta hai (styling, interaction). Bade projects mein platform ki JavaScript API (jaise YouTube IFrame API) use karke deeper integration/control milta hai — trade-off hai simplicity vs control ka.
<!-- Simple iframe embed: -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
<!-- vs. JavaScript API (zyada control, zyada complexity):
player.play(), player.pause(), custom event listeners, etc. -->