How do you embed videos in HTML?

Videos are embedded with the <video> element — either pointing src straight at a file, or nesting several <source> tags so the browser picks a format it can play.

The simplest form names one file and turns on playback controls:

<video src="movie.mp4" controls width="360" height="240"
       poster="thumbnail.jpg">
</video>

Here poster is the still image shown before the video starts. Because not every browser supports every codec, you can instead offer multiple formats and let the browser choose:

<video controls width="360" height="240" poster="thumbnail.jpg">
    <source src="movie.ogv" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
</video>

The browser walks the <source> list top to bottom and plays the first format it understands.

Several behaviours are controlled by boolean attributes — HTML attributes that need no value, present meaning "on":

Practical gotcha: modern browsers block autoplay with sound to avoid surprising users, so if you really need a video to start by itself, pair autoplay with muted.

Go deeper:

• <video>: the video embed element — MDN — <source> fallback ordering, the boolean attributes, and captions/accessibility.