In HTML, an <iframe> (short for inline frame) is used to embed another HTML document within the current document. It allows you to display content from another source, such as a different web page or external media, within the context of the current page.
Here's a basic example of how to use the <iframe> element:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IFrame Example</title> </head> <body> <h2>Embedded Content</h2> <iframe src="https://www.example.com" width="600" height="400" title="External Content"></iframe> </body> </html>
In this example:
- The <iframe> element is used with the src attribute set to the URL of the external content you want to embed.
- The width and height attributes define the dimensions of the iframe.
- The title attribute provides a text description for accessibility.
It's important to note that using <iframe> to embed content from external sources may have security implications, especially if the content is from an untrusted source. Browsers implement security measures to prevent certain types of attacks (e.g., clickjacking), and some websites may use measures to restrict embedding.
Responsive Iframes:
To create a responsive iframe that adjusts its size based on the screen width, you can use CSS. Here's an example:
<style>
.responsive-iframe {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* Aspect ratio for a 16:9 video */
position: relative;
}
.responsive-iframe iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<div class="responsive-iframe">
<iframe src="https://www.example.com" title="External Content" allowfullscreen></iframe>
</div>
In this example, the padding-bottom property is used to set the aspect ratio of the iframe. The position: relative on the container and position: absolute on the iframe are used to ensure proper sizing and positioning.
Additionally, the allowfullscreen attribute is included to allow the iframe to be viewed in fullscreen mode if the embedded content supports it.