In HTML, an <iframe> (inline frame) is used to embed another HTML document within the current document. This is often used to include external content such as videos, maps, or other web pages into a parent document. Here are various examples of how to use iframes in HTML:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Iframe Example</title>
</head>
<body>
<h1>Parent Document</h1>
<iframe src="https://www.example.com" width="600" height="400" title="External Content"></iframe>
</body>
</html>
In this example, an iframe is used to embed the content of https://www.example.com within the parent document.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Iframe Example</title>
</head>
<body>
<h1>Parent Document</h1>
<iframe src="internal-page.html" width="600" height="400" title="Internal Content"></iframe>
</body>
</html>
In this case, the iframe is used to embed content from a local file named internal-page.html.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attributes Example</title>
</head>
<body>
<h1>Parent Document</h1>
<iframe src="https://www.example.com" width="800" height="600" frameborder="0" scrolling="no" allowfullscreen></iframe>
</body>
</html>
In this example, various attributes like width, height, frameborder, scrolling, and allowfullscreen are used to control the appearance and behavior of the iframe.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Iframe Example</title>
<style>
.responsive-iframe {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
</style>
</head>
<body>
<h1>Parent Document</h1>
<iframe src="https://www.example.com" class="responsive-iframe" frameborder="0" allowfullscreen></iframe>
</body>
</html>
This example demonstrates how to create a responsive iframe that maintains a 16:9 aspect ratio. The padding-bottom CSS property is used to achieve this.
These examples showcase different scenarios for using iframes in HTML, from embedding external content to controlling iframe attributes and creating responsive designs.