HTML Iframes Explained with Examples

An HTML iframe (inline frame) is an HTML element that allows you to embed another HTML document within the current document. Iframes are commonly used to embed videos, maps, advertisements, or other external content into a web page.

Basic Iframe Syntax

<iframe src="URL" width="width" height="height"></iframe>

Examples of Iframes

1. Basic Iframe Example

<!DOCTYPE html>
<html>
<head>
    <title>Basic Iframe Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        iframe {
            border: 2px solid #4CAF50;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Basic Iframe Example</h1>
        <p>Below is an iframe displaying the Wikipedia homepage:</p>
        <iframe src="https://www.wikipedia.org/" width="100%" height="400"></iframe>
    </div>
</body>
</html>

2. YouTube Video Embed

<!DOCTYPE html>
<html>
<head>
    <title>YouTube Iframe Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f8ff;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        iframe {
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Embedded YouTube Video</h1>
        <p>This is an example of embedding a YouTube video using an iframe:</p>
        <iframe width="560" height="315" 
                src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
                title="YouTube video player" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                allowfullscreen>
        </iframe>
    </div>
</body>
</html>

3. Google Maps Embed

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps Iframe Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff3cd;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        iframe {
            border: none;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Embedded Google Map</h1>
        <p>This is an example of embedding a Google Map using an iframe:</p>
        <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.9663095343008!2d-74.00425872426607!3d40.74076987932881!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259bf5c8eef01%3A0x41d071c4d5cd2d64!2sMadison%20Square%20Garden!5e0!3m2!1sen!2sus!4v1685488806447!5m2!1sen!2sus" 
            width="100%" 
            height="450" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy">
        </iframe>
    </div>
</body>
</html>

4. Iframe with Sandbox Attribute

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Sandbox Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #e9ecef;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        iframe {
            border: 2px dashed #6c757d;
            border-radius: 5px;
        }
        .note {
            background-color: #fff3cd;
            padding: 10px;
            border-left: 4px solid #ffc107;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Sandboxed Iframe Example</h1>
        <div class="note">
            <p>The sandbox attribute enables an extra set of restrictions for the content in the iframe.</p>
        </div>
        <p>This iframe is sandboxed to prevent scripts and form submissions:</p>
        <iframe src="https://example.com" width="100%" height="300" sandbox="allow-same-origin"></iframe>
    </div>
</body>
</html>

Iframe Attributes

Here are some important iframe attributes:

src: Specifies the URL of the page to embed
width: Sets the width of the iframe
height: Sets the height of the iframe
name: Specifies a name for the iframe
sandbox: Enables security restrictions
allowfullscreen: Allows the iframe to open in fullscreen mode
loading: Specifies how the iframe should be loaded (eager/lazy)

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us