HTML Iframe

HTML iframe is used to embed another HTML page within the current page. This feature is particularly useful for embedding content such as videos, maps, or other web pages within a parent page.

Syntax

The basic syntax of an iframe is as follows:

html
<iframe src="URL"></iframe>

Where URL is the address of the web page you want to embed.

Attributes

The iframe element supports several attributes to control its appearance and behavior. Some commonly used attributes are:

  • src: Specifies the URL of the page to embed.
  • width: Defines the width of the iframe.
  • height: Defines the height of the iframe.
  • name: Assigns a name to the iframe.
  • frameborder: Sets the border width around the iframe (deprecated in HTML5).
  • allowfullscreen: Allows the iframe to be displayed in full-screen mode.
  • loading: Specifies whether the iframe should be loaded immediately or deferred until it is visible.

Basic Example

Here’s a simple example of an iframe embedding a webpage:

html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Basic Iframe Example</title>
</head>

<body>
    <h1>Embedding an HTML Page</h1>
    
    <iframe src="https://www.example.com" 
        width="600" height="400" 
        title="Example Iframe"></iframe>
</body>

</html>

In this example, the iframe embeds the content from "https://www.example.com" within the parent page, setting its width to 600 pixels and height to 400 pixels.

Embedding a YouTube Video

You can embed a YouTube video using an iframe. Here’s how:

html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Embedding a YouTube Video</title>
</head>

<body>
    <h1>YouTube Video</h1>

    <iframe width="560" height="315" 
        src="https://www.youtube.com/embed/..." 
        title="YouTube video player" frameborder="0" 
        allowfullscreen></iframe>
</body>

</html>

In this example, the iframe embeds a YouTube video, allowing it to be played directly within the parent page.

Embedding a Google Map

You can also embed a Google Map using an iframe. Here’s an example:

html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Embedding a Google Map</title>
</head>

<body>
    <h1>Google Map</h1>
    
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093747!2d144.95373631586827!3d-37.81720974258459!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf0727e9b1a30b1c4!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sus!4v1611819836114!5m2!1sen!2sus" 
        width="600" height="450" style="border:0;" 
        allowfullscreen="" loading="lazy"></iframe>
</body>

</html>

This example shows how to embed a Google Map of Melbourne, Australia, using an iframe.

Customizing Iframe Styles

You can apply CSS styles to an iframe to control its appearance. Here’s an example of a styled iframe:

html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Styled Iframe</title>

    <style>
        iframe {
            border: 2px solid #000;
            border-radius: 10px;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <h1>Styled Iframe</h1>

    <iframe src="https://www.example.com" 
        width="600" height="400" 
        title="Styled Iframe"></iframe>
</body>

</html>

In this example, the iframe has a black border, rounded corners, and a shadow effect.

tools

HTML

Related Articles