<iframe> : Inline Frame element

by

Introduction

The <iframe> (Inline Frame) element is an HTML tag used to embed another document or web page within the current HTML document. It allows you to include content from external sources such as other web pages, videos, maps, or interactive applications seamlessly into your own webpage. The content within the <iframe> is independent of the surrounding document, and it can be from a different domain.

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>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2486.5755359352615!2d76.61701204925981!3d28.190632948307677!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d51bc962d7525%3A0xcb4e993c6083c76c!2sZillionsoftech%20Pvt.%20Ltd.%20Computer%20Institute%20Rewari!5e0!3m2!1sen!2sin!4v1705666402893!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>

Output :

In the example above:

  • The src attribute specifies the source URL of the content you want to embed.
  • The width and height attributes define the dimensions of the

Uses of <iframe> tag :

The <iframe> element is commonly used for various purposes on the web to embed content from external sources into a webpage. Some common uses of <iframe> links include:

1. Embedding External Websites: You can use an <iframe> to embed content from another website directly into your webpage. For example, embedding a map from Google Maps or a Twitter timeline.

<!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>
  <iframe src="https://zillionsoftech.com/" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>
</html>

2. Embedding Videos: Popular video-sharing platforms like YouTube provide embed codes for their videos, allowing you to include them in your webpage using an <iframe>.

<!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>
  <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Freel%2F3724511201166422&width=500&show_text=false&height=889&appId" width="500" height="889" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
</body>
</html>

3. Including Interactive Content: Embedding interactive content, such as online games or interactive applications, using iframes can enhance the user experience.

<!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>
  <iframe src="https://example.com/interactive-game" width="800" height="600" frameborder="0"></iframe>
</body>
</html>

4. Displaying Documents: You can use iframes to display documents, PDFs, or other file types within your webpage.

<!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>
  <iframe src="ap.pdf" width="800" height="600" frameborder="0"></iframe>
</body>
</html>

5. Ads and Widgets: Some services provide widgets or ads in the form of iframes that you can easily integrate into your website.

<!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>
  <iframe src="https://ad-provider.com/ad-widget" width="300" height="250" frameborder="0"></iframe>
</body>
</html>

6. Embedding Forms: You can use iframes to embed forms from external services into your webpage, such as a survey or a signup form.

<!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>
  <iframe src="https://form-provider.com/signup-form" width="400" height="600" frameborder="0"></iframe>
</body>
</html>

When using iframes, it’s crucial to consider security and ensure that you have the necessary permissions to embed and display content from external sources. Additionally, keep in mind that some websites may have restrictions on embedding their content, so it’s essential to check the terms of use for each specific case.

Leave a Comment