HTML TUTORIALS-
HTML Iframes Tag –
Introduction-
🔹-HTML <iframe> (short for inline frame) is an element used to embed another HTML page within the current page. It allows you to display content from other websites, documents, or internal pages inside a frame on your own page.....
🔹 Common Attributes:-
1) -src: URL of the page to embed-
2) -width / height: Dimensions of the iframe-
3) -title: For accessibility — describes the iframe content-
4) -frameborder: Deprecated. Use CSS for borders instead-
5) -allowfullscreen: Allows iframe content to go fullscreen (used in video embeds)-
6) -loading: lazy to defer loading until the iframe is visible-
7) -sandbox: Adds security restrictions on the iframe (like disabling scripts)-
✅ Example:- Embed a YouTube video: -👇
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/KyVGxg5dCOQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
✅ Example:- Displaying a Website -👇
<iframe src="https://www.learntosap.com" width="800" height="600" title="Example Site"></iframe>
✅ Example:- Displaying a PDF File -👇
<iframe src="example.pdf" width="100%" height="500px"></iframe>✅ Example:- Embedding a Google Map -👇
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.019507908471!2d144.96487341531745!3d-37.81421797975151!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d43fbf8dbaf%3A0x4a8a0f0b6d2c4a0!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1611019543432!5m2!1sen!2sau"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>