Open In App

How to Add Video in HTML?

Improve
Improve
Like Article
Like
Save
Share
Report

Adding videos to your web pages can improve user engagement and provide useful content. In this tutorial, we’ll explore how to embed videos using HTML. HTML allows playing video in the web browser by using the <video> tag.

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.

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:

addvideo

Add Video in HTML

Explanation:

  • The <video> tag defines the video player.
  • HTML video width and height attributes set the player’s dimensions.
  • The controls attribute adds play, pause, and volume controls.
  • The <source> tag specifies the video file’s URL and its type (e.g., MP4).

Last Updated : 20 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads