The <iframe> tag in HTML is used to embed another HTML document within the current webpage. It allows you to display content from external sources, such as videos, websites, or maps, without leaving the page. This is useful for integrating third-party content into your site.
The <iframe> tag requires a src attribute, which specifies the URL of the document to be embedded. Other optional attributes like width, height, and frameborder can be used to control the appearance of the iframe.
Example of Embedding a Website:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
In this example, the <iframe> tag embeds the content from https://www.example.com within the current page. The width and height attributes specify the size of the iframe.
The <iframe> tag supports several attributes to customize its behavior:
src: Specifies the URL of the page or content to embed.width: Specifies the width of the iframe.height: Specifies the height of the iframe.frameborder: Controls the appearance of the border around the iframe. Use frameborder="0" to remove the border.allowfullscreen: Allows the iframe content (such as videos) to be viewed in fullscreen mode.loading: Defines when the iframe content is loaded, either lazy (lazy loading) or eager (immediate loading).
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>
This example embeds a YouTube video within the page. The allowfullscreen attribute enables fullscreen mode for the video, and frameborder="0" removes the border around the iframe.
You can also use <iframe> to embed Google Maps on your webpage. This is commonly used for showing locations or directions.
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" frameborder="0" style="border:0" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
The src attribute contains the URL from Google Maps, which includes the map's location and other details. The allowfullscreen attribute allows the user to view the map in fullscreen mode.
sandbox Attribute
The sandbox attribute applies restrictions to the content within an iframe. It is useful for enhancing security by disabling certain features, such as forms, scripts, or plugins within the iframe.
Example of Using the sandbox Attribute:
<iframe src="https://www.example.com" width="600" height="400" sandbox="allow-scripts"></iframe>
This example embeds a page but restricts the iframe's ability to perform certain actions. Only scripts are allowed to run within the iframe.
The <iframe> tag is a useful tool for embedding external content into your webpage. By using attributes like width, height, frameborder, and sandbox, you can control how the embedded content appears and behaves. This makes it easy to integrate multimedia, maps, and other resources without needing to redirect users away from your site.