Alternatives of iframe in HTML

Last Updated : 24 Apr, 2024

The iframe is used to embed another HTML document within your current webpage. The HTML <iframe> tag is used to create an inline frame or container. This container allows you to embed another document within your current HTML document. To specify the HTML content of the page to be displayed inside the <iframe>, you can use the “srcdoc” attribute.

There are three different alternatives that can be used in place of an iframe.

Table of Content

Using <embed> Element
Using <object> Element
Using <video> Element

Using <embed> Element

The <embed> tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document. It is used as a container for embedding plug-ins such as Flash animations.

Example: The <embed> tag is an alternative for the iframe tag in an HTML document.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Alternative of iframe (HTML embed Tag)
    </title>
    
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>Using &lt;embed&gt; Element</h3>
    
    <embed src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108102825/mern.mp4" 
        type="video/mp4" width="600" height="400">
</body>

</html>

Output:

Alternative of iframe (HTML embed Tag)

Using <object> Element

The <object> element is used to display multimedia like audio, videos, images, PDFs, and Flash on web pages. It can also be used for displaying another webpage inside the HTML page.

Example: The <object> tag is an alternative for the iframe tag in an HTML document.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Alternative of iframe (HTML object Tag)
    </title>
    
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>Using &lt;object&gt; Element</h3>
    
    <object data=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108102825/mern.mp4" 
        type="video/mp4" width="600" height="400">
        GeeksforGeeks
    </object>
</body>

</html>

Output:

Alternative of iframe (HTML object Tag)

Using <video> Element

The <video> element is used to embed video content on the web page. It allows the addition of video files in many formats such as MP4, WebM, etc. This element supports attributes like controls, autoplay, and loop to control video playback.

Example: The <video> element is an alternative for the iframe tag (It is used for append video) in an HTML document.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Alternative of iframe (HTML video Tag)
    </title>
    
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using &lt;video&gt; Element</h3>

    <video width="600" height="400" controls>
        <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108102825/mern.mp4" 
            type="video/mp4">
            GeeksforGeeks
    </video>
</body>

</html>