What is an iFrame?
- An iFrame is an HTML element that enables an inline frame for the embedding of external content. Essentially, you can load another web page within a designated area of your current webpage.
Why Use iFrames?
- Content Isolation: iFrames allow you to isolate third-party content, which can improve security.
- Modularity: Easily embed external plugins, widgets, or content.
- Resource Separation: Content within an iFrame can load separately from the rest of the page.
Basic Syntax
Attributes of iFrame
- src: Specifies the URL of the page to embed.
- height and width: Define the dimensions.
- frameborder: Indicates whether to display a border.
- scrolling: Controls the scrollbars.
- name: For targeting the iFrame in JavaScript.
<html lang="en">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>html iframe</title></head>
<body> <iframe width="560" height="315" src="https://www.youtube.com/watch?v=x19Lor18B50" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <hr /> <iframe src="https://www.wikipedia.org/" frameborder="0" width="100%" height="500"></iframe> <!-- keep in mind we cannot embed all the sites ex. Google, yt direct --> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3782.26131732789!2d73.91411937534653!3d18.56225398253939!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2c147b8b3a3bf%3A0x6f7fdcc8e4d6c77e!2sPhoenix%20Marketcity%20Pune!5e0!3m2!1sen!2sin!4v1693563525384!5m2!1sen!2sin" width="100%" height="450" style="border: 0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>html iframe</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/watch?v=x19Lor18B50" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<hr />
<iframe src="https://www.wikipedia.org/" frameborder="0" width="100%" height="500"></iframe>
<!-- keep in mind we cannot embed all the sites ex. Google, yt direct -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3782.26131732789!2d73.91411937534653!3d18.56225398253939!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2c147b8b3a3bf%3A0x6f7fdcc8e4d6c77e!2sPhoenix%20Marketcity%20Pune!5e0!3m2!1sen!2sin!4v1693563525384!5m2!1sen!2sin"
width="100%" height="450" style="border: 0" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>
Do leave your comments