HTML IFrame

The iframe element in HTML is used to embed another HTML document within the current document. This allows you to display external content such as webpages, videos, and interactive maps directly within your webpage.

Basic IFrame Example

Here is a basic example of an iframe element:

Try yourself 
        
            <iframe src="https://www.lets-coding.com" width="600" height="400"></iframe>

Attributes of IFrame

The iframe element comes with several attributes that allow you to control its behavior and appearance. Below are some of the most commonly used attributes:

Attribute Description Example
src Specifies the URL of the page to embed.
Try yourself 
        
            <iframe src="https://www.lets-coding.com"></iframe>
width Specifies the width of the iframe.
Try yourself 
        
            <iframe src="https://www.lets-coding.com" width="600"></iframe>
height Specifies the height of the iframe.
Try yourself 
        
            <iframe src="https://www.lets-coding.com" height="400"></iframe>
name Specifies the name of the iframe.
Try yourself 
        
            <iframe src="https://www.lets-coding.com" name="myiframe"></iframe>
frameborder Specifies whether or not to display a border around the iframe.
Try yourself 
        
            <iframe src="https://www.lets-coding.com" frameborder="1"></iframe>
allowfullscreen Specifies whether the iframe can be displayed in full-screen mode.
Try yourself 
        
            <iframe src="https://www.lets-coding.com" allowfullscreen></iframe>

Using IFrame in HTML

Here is how you can apply the iframe element in your HTML document:

Example: IFrame with src
Try yourself 
        
            <iframe src="https://www.lets-coding.com"></iframe>

This example shows an iframe element that embeds the content from the specified URL.

Example: IFrame with width and height
Try yourself 
        
            <iframe src="https://www.lets-coding.com" width="600" height="400"></iframe>

This example shows an iframe element with specified width and height.

Example: Responsive IFrame
Try yourself 
        
            <style>
    .iframe-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }
    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
</style>
<div class="iframe-container">
    <iframe src="https://www.lets-coding.com"></iframe>
</div>

This example shows how to make an iframe responsive using CSS.

Important Notes

Here are some important notes and best practices when using the iframe element: