How to Add Video in HTML?

Last Updated : 17 Apr, 2024

Adding videos to your web pages can enhance user engagement and deliver valuable content. Utilizing HTML elements like <video>, <iframe>, or <object>, you can embed video files directly into your web pages, enabling seamless viewing and interaction with the video content within the webpage itself.

To embed the video in the webpage, we use the src element for mentioning the file address, and width and height attributes are used to define its size.

1. Adding Video Using `<video>` Tag

The <video> tag allows us to embed videos directly into our HTML pages.

The video tag uses width, height, and control attributes to set and control the video on the web page. Also, use the source tag with the src attribute to add a source of the video. To ensure compatibility across browsers, provide multiple video formats (MP4, WebM, Ogg) within the <video> tag.

Example: In this example, we are using the above-discussed approach.

html

<!DOCTYPE html>
<html>
    <body style="text-align: center">
        <h2>How to Add Video in HTML</h2>
        <video width="500px" 
               height="400px" 
               controls="controls">
        <source 
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231020155223/
Full-Stack-Development-_-LIVE-Classes-_-GeeksforGeeks.mp4" 
                type="video/mp4" />
       </video>
    </body>
</html>

Output:

Add Video in HTML

2. Adding Video Using Iframe Tag

Embedding a video via iframe allows seamless integration from external sources like YouTube. Simply specify the video’s URL within the iframe tag, providing width, height, and optional attributes for customization and functionality.

Example: In this example we use an iframe displaying a video from a specified source. The video is embedded with a width of 400 and a height of 200, allowing full-screen view.

HTML

<!DOCTYPE html>
<html>
    <body style="text-align: center">
        <h2>Using Iframe Tag</h2>
        <iframe width="400" 
                height="200" 
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" 
                frameborder="0" 
                allowfullscreen>
        </iframe>
    </body>
</html>

Output:

Using Iframe Tag Example Output

3. Adding Video Using the object element

The <object> element embeds a video in HTML. It supports various multimedia formats. Specify the source file using the data attribute. This method allows customization through nested elements and provides fallback content for unsupported browsers.

Example: In this example we embeds a video using the <object> element. The video’s source and type are specified in the ‘data’ and ‘type’ attributes, respectively, with defined width and height dimensions.

HTML

<!DOCTYPE html>
<html>
    <body style="text-align: center">
        <h2>Using the object element</h2>
        <object
            width="500"
            height="400"
            data=
"https://media.geeksforgeeks.org/wp-content/uploads/20231020155223/
Full-Stack-Development-_-LIVE-Classes-_-GeeksforGeeks.mp4"
            type="video/mp4"
        >
            
        </object>
    </body>
</html>