To add a video in HTML, you use the <video> tag, which allows you to embed videos directly into your webpage for users to view without needing external players.
- The <video> tag supports multiple formats like MP4, WebM, and Ogg.
- You can include attributes such as controls, autoplay, and loop to enhance user experience.
- Use the <source> tag within <video> to specify the video file's path and type for browser compatibility.
<html>
<body>
<p>Watch this video to get started with Full-Stack Development:</p>
<video controls width="600">
<source
src="
https://media.geeksforgeeks.org/wp-content/uploads/20231020155223/Full-Stack-Development-_-LIVE-Classes-_-GeeksforGeeks.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
- The <video> tag is used to embed the video, and the controls attribute adds play, pause, and volume options.
- The <source> tag specifies the video file link and format (type="video/mp4" ensures compatibility with most browsers).
Ways to Insert Video in HTML
Lets see How to add/insert video in HTML with help of different examples.
1. Adding Video Using <video> Tag
The <video> tag allows you to embed videos directly into your HTML pages with control over their appearance and playback.
- Use the width, height, and controls attributes to define the video dimensions and provide playback controls.
- The <source> tag with the src attribute specifies the video file, and multiple formats (like MP4, WebM, Ogg) can be added for better browser compatibility.
<html>
<body style="text-align: center;">
<h2>How to Add Video in HTML</h2>
<video width="500px" height="400px" controls>
<source src="https://media.geeksforgeeks.org/wp-content/uploads/20231020155223/Full-Stack-Development-_-LIVE-Classes-_-GeeksforGeeks.mp4" type="video/mp4">
</video>
</body>
</html>
- width and height: Define the video size on the page.
- controls: Adds playback controls (play, pause, volume, etc.).
- Video Source: Specified using the <source> tag with the src attribute pointing to the video URL and type indicating the format (MP4 in this case).
2. Adding Video Using Iframe Tag
Embedding a video via an <iframe> allows seamless integration from external sources like YouTube.
- Specify the video's URL within the <iframe> tag to embed the content.
- Define the width and height attributes to control the display dimensions.
<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>
- <iframe> Tag: Used to embed external content, such as videos from YouTube, into your webpage.
- width and height: Set the dimensions of the embedded video.
3. Adding Video Using the object element
The <object> element allows embedding various multimedia formats, including videos, into HTML documents.
- Specify the video's source file using the data attribute.
- Define the width and height attributes to control the video's display dimensions.
<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>
- <object> Element: Used to embed multimedia content, such as videos, into a webpage.
- width and height: Define the dimensions of the embedded video player.
- data: Specifies the URL of the video file to be embedded.
- type: Indicates the MIME type of the embedded content; in this case, video/mp4.
Best Practices for Embedding Videos in HTML
- Use the <video> Tag: Utilize the <video> element for embedding videos, as it offers better control and is widely supported across modern browsers.
- Provide Multiple Formats: Include multiple video formats (e.g., MP4, WebM, Ogg) within the <video> tag to ensure compatibility across different browsers.