Video is one of the most engaging ways to present content on the web. The <video> element lets you embed videos directly into your page, just like <audio> does for sound. No need for Flash or third-party plugins.
Your First Video Player
The basic setup is simple — a <video> tag with the controls attribute and a <source> pointing to your video file.
<video controls width="640">
<source src="tutorial.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Setting Width and Height
Use the width and height attributes to control the video player size. If you set only one, the browser maintains the aspect ratio. The video itself will fill the player while keeping its proportions.
<video controls width="480" height="360">
<source src="demo.mp4" type="video/mp4">
</video>
Multiple Source Formats
Different browsers support different video formats. MP4 with H.264 is the most widely supported, but you can provide WebM and Ogg as alternatives for browsers that handle them better.
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser does not support the video element.
</video>
Adding a Poster Image
Want a custom thumbnail before the user presses play? Use the poster attribute. It displays an image in place of the video until playback starts.
<video controls poster="thumbnail.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
If you do not set a poster, the browser shows the first frame of the video — which is often just a black screen.
Autoplay, Loop, and Muted
The autoplay and loop attributes work just like they do for audio. One extra trick: most browsers allow autoplay only if the video is muted. So if you want a background video that plays automatically, mute it.
<video autoplay loop muted>
<source src="background.mp4" type="video/mp4">
</video>
This combination is popular for hero sections on landing pages — a looping background video that adds visual interest without annoying the visitor.