HTML Iframes – Solved Practice Questions

By /

Introduction

An HTML <iframe> is used to embed another webpage, document, video, map, or online content inside the current webpage. It is useful for displaying external content without leaving the page. In this chapter, you’ll practice creating and customizing iframes with simple, real-world solved questions.

Question 1

Problem Statement

Create a webpage that displays another webpage using an <iframe>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Basic Iframe</title>
</head>
<body>

    <h1>My Webpage</h1>

    <iframe
        src="https://example.com"
        width="600"
        height="400">
    </iframe>

</body>
</html>

Output

My Webpage

┌──────────────────────────────────┐
│                                  │
│      Embedded Webpage            │
│                                  │
└──────────────────────────────────┘

Step-by-Step Explanation

  • <iframe> creates an embedded frame.
  • src specifies the webpage to display.
  • width controls the iframe width.
  • height controls the iframe height.

Question 2

Problem Statement

Create an iframe with a width of 500 pixels and a height of 300 pixels.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Size</title>
</head>
<body>

    <h1>Embedded Content</h1>

    <iframe
        src="https://example.com"
        width="500"
        height="300">
    </iframe>

</body>
</html>

Output

Embedded Content

┌─────────────────────────────┐
│                             │
│      Embedded Content       │
│                             │
└─────────────────────────────┘

Step-by-Step Explanation

  • width="500" sets the iframe width.
  • height="300" sets the iframe height.
  • You can change these values according to the available space.

Question 3

Problem Statement

Create a webpage that embeds a YouTube video using an iframe.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>YouTube Video</title>
</head>
<body>

    <h1>HTML Learning Video</h1>

    <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="HTML Learning Video">
    </iframe>

</body>
</html>

Output

HTML Learning Video

┌───────────────────────────────┐
│                               │
│          Video Player         │
│                               │
└───────────────────────────────┘

Step-by-Step Explanation

  • YouTube provides an embed URL for videos.
  • The URL is placed inside the src attribute.
  • title describes the embedded content.
  • Replace VIDEO_ID with the actual YouTube video ID.

Question 4

Problem Statement

Create an iframe that displays a Google Maps location.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Google Map</title>
</head>
<body>

    <h1>Our Location</h1>

    <iframe
        src="GOOGLE_MAP_EMBED_URL"
        width="600"
        height="450"
        title="Our Location">
    </iframe>

</body>
</html>

Output

Our Location

┌──────────────────────────────────┐
│                                  │
│             MAP                  │
│                                  │
└──────────────────────────────────┘

Step-by-Step Explanation

  • Google Maps can provide an iframe embed code.
  • The embed URL is placed in src.
  • title describes the map.
  • The width and height control the map’s display area.

Question 5

Problem Statement

Create an iframe that displays a local HTML file named about.html.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Local Iframe</title>
</head>
<body>

    <h1>About Our Website</h1>

    <iframe
        src="about.html"
        width="600"
        height="300"
        title="About Page">
    </iframe>

</body>
</html>

Output

About Our Website

┌──────────────────────────────────┐
│                                  │
│       Content from about.html    │
│                                  │
└──────────────────────────────────┘

Step-by-Step Explanation

  • src="about.html" loads a local HTML file.
  • The file should be available in the correct folder.
  • This is useful for practicing iframes without an internet connection.

Concepts Used: <iframe>, src, local file path

Question 6

Problem Statement

Create an iframe with a border around the embedded content using CSS.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Border</title>

    <style>
        iframe {
            border: 3px solid black;
        }
    </style>
</head>
<body>

    <h1>Embedded Website</h1>

    <iframe
        src="https://example.com"
        width="600"
        height="300"
        title="Example Website">
    </iframe>

</body>
</html>

Output

Embedded Website

┌──────────────────────────────────┐
│                                  │
│       Embedded Website           │
│                                  │
└──────────────────────────────────┘

Step-by-Step Explanation

  • The <iframe> displays external content.
  • CSS is used to add a border.
  • border: 3px solid black creates the visible border.
  • Styling an iframe with CSS is better than relying on old HTML attributes.

Question 7

Problem Statement

Create an iframe that takes the full available width of its parent element.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Iframe</title>

    <style>
        iframe {
            width: 100%;
            height: 400px;
            border: none;
        }
    </style>
</head>
<body>

    <h1>Responsive Iframe</h1>

    <iframe
        src="https://example.com"
        title="Example Website">
    </iframe>

</body>
</html>

Output

Responsive Iframe

┌────────────────────────────────────────┐
│                                        │
│          Embedded Website              │
│                                        │
└────────────────────────────────────────┘

Step-by-Step Explanation

  • width: 100% makes the iframe use the available width.
  • height: 400px sets its height.
  • border: none removes the default border.
  • This approach is useful for responsive webpages.

Question 8

Problem Statement

Create an iframe that loads a local page named contact.html and give it a meaningful title.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Contact Page</title>
</head>
<body>

    <h1>Contact Information</h1>

    <iframe
        src="contact.html"
        width="600"
        height="300"
        title="Contact Information">
    </iframe>

</body>
</html>

Output

Contact Information

┌──────────────────────────────────┐
│                                  │
│       Contact information        │
│                                  │
└──────────────────────────────────┘

Step-by-Step Explanation

  • src="contact.html" loads the local page.
  • The title attribute describes the iframe content.
  • A meaningful title improves accessibility.
  • The referenced HTML file must exist in the correct location.

Question 9

Problem Statement

Create a webpage that displays two different webpages using two iframes.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Iframes</title>
</head>
<body>

    <h1>Useful Websites</h1>

    <iframe
        src="https://example.com"
        width="500"
        height="250"
        title="First Website">
    </iframe>

    <br><br>

    <iframe
        src="https://example.org"
        width="500"
        height="250"
        title="Second Website">
    </iframe>

</body>
</html>

Output

Useful Websites

┌─────────────────────────────┐
│     First Embedded Page     │
└─────────────────────────────┘

┌─────────────────────────────┐
│    Second Embedded Page     │
└─────────────────────────────┘

Step-by-Step Explanation

  • Multiple <iframe> elements can be used on one webpage.
  • Each iframe can have a different src.
  • Each iframe should have a meaningful title.
  • <br> adds space between the two frames.

Question 10

Problem Statement

Create a simple webpage that embeds a video using an iframe and makes the iframe responsive.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Video</title>

    <style>
        .video-container {
            width: 100%;
            max-width: 700px;
        }

        .video-container iframe {
            width: 100%;
            height: 400px;
            border: none;
        }
    </style>
</head>
<body>

    <h1>HTML Video Practice</h1>

    <div class="video-container">

        <iframe
            src="https://www.youtube.com/embed/VIDEO_ID"
            title="HTML Practice Video"
            allowfullscreen>
        </iframe>

    </div>

</body>
</html>

Output

HTML Video Practice

┌────────────────────────────────────┐
│                                    │
│            Video Player            │
│                                    │
└────────────────────────────────────┘

Step-by-Step Explanation

  • .video-container controls the maximum video width.
  • width: 100% allows the iframe to adapt to the available space.
  • height: 400px controls the video height.
  • allowfullscreen allows the video to open in fullscreen mode.
  • Replace VIDEO_ID with the actual YouTube video ID.

Concepts Used: <iframe>, CSS, responsive design, allowfullscreen

Key Takeaways

  • <iframe> embeds external or local content inside a webpage.
  • The src attribute specifies the content to load.
  • width and height control the iframe dimensions.
  • The title attribute describes the embedded content.
  • CSS can be used to style and make iframes responsive.
  • Multiple iframes can be used on the same webpage.
  • Iframes are commonly used for videos, maps, documents, and external webpages.

Frequently Asked Questions (FAQs)

1. What is an iframe in HTML?

An iframe is an HTML element used to embed another webpage or online content inside the current webpage.

2. Which tag is used to create an iframe?

The <iframe> tag is used.

3. What does the src attribute do?

The src attribute specifies the URL or file that should be displayed inside the iframe.

4. Can I embed a YouTube video using an iframe?

Yes. YouTube provides an embed URL that can be placed inside the src attribute.

5. Can an iframe display a local HTML page?

Yes. For example:

<iframe src="about.html"></iframe>

6. Can I use CSS with an iframe?

Yes. CSS can control its width, height, border, spacing, and responsive behavior.

7. Why should I use the title attribute with an iframe?

The title describes the iframe content and helps users who rely on assistive technologies understand what the embedded content represents.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top