Embed Video in HTML
Audio and Video
In this lesson, we will learn how to embed video in an HTML document using the video tag.
What is video Tag in HTML
The <video> tag is the most commonly used method for embedding videos in HTML documents. It is simple to use and supported by all modern browsers. The <video> tag can be used to play video files in various formats like MP4, WEBM, and OGG.
Supported Video Formats and its Media Types
The table below shows the video formats and their media types supported in HTML.
| Video Format | Media Type |
| mp4 | video/mp4 |
| webm | video/webm |
| ogg | video/ogg |
Attributes of the Video Tag
- src: This attribute specifies the URL of the video file.
- width: This attribute specifies the width (in pixel) of the video player.
- height: This attribute specifies the height (in pixel) of the video player.
- controls: This attribute adds the playback controls to the video player.
- autoplay: This attribute automatically plays the video file when the page loads.
- muted: This attribute mute the speakers when you play the video.
- loop: This attribute sets the video file to play continuously.
- preload: This attribute specifies whether the video file should be loaded when the page loads.
How to Use <video> Tag in HTML
Here is an example of how to use the <video> tag to embed a video file in an HTML document.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video Tag Example</title>
</head>
<body>
<video height="200" controls autoplay loop>
<source src="video-file.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>In the above example, we used the video tag with the attributes width, controls, autoplay and loop. In between opening and closing video tags we used the source tag to embed our mp4 video file using the src attribute and its media type using the type attribute.
If the browser does not support the video tag, the text inside the video tag will be displayed.
Click here to download the above mp4 video file for practice purposes.
Embedding YouTube Video in HTML
You can also embed YouTube videos in your web pages using iframes. Here is an example:
Example
<iframe width="560" height="315" src="https://www.youtube.com/embed/TW3kzfTkhC4" frameborder="0"></iframe>
To embed another youtube video just change the video id written after embed/TW3kzfTkhC4 with another youtube video id which you can get from the youtube website. Open the youtube.com select any video, copy the video id which is written after v= in the video url for example https://www.youtube.com/watch?v=TW3kzfTkhC4.
