Embedding Videos With <video>

~8 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026

Just like images, you can also embed videos directly into your website, without needing YouTube or another provider. That's what the <video> element is for.

The <video> element

<video src="videos/highlights.mp4" controls></video>

Unlike <img>, <video> does have a closing tag, even if nothing goes in between here. The controls attribute is especially important: it shows a play/pause button, a volume control, and a progress bar. Without controls, the video would still load, but the visitor would have no way to operate it!

Tipp: controls is an example of a boolean attribute: it needs no value, the mere presence of the word turns the property on. So you don't write controls="yes", just plain controls.

Offering multiple video formats with source

Not every browser supports every video format equally well. To be on the safe side, you can offer several formats and let the browser choose which one to use. For this you use <source> elements inside <video> instead of the src attribute directly on the video tag:

<video controls>
  <source src="videos/highlights.mp4" type="video/mp4">
  <source src="videos/highlights.webm" type="video/webm">
  Sorry, your browser doesn't support video.
</video>

The browser tries the <source> elements one by one and uses the first format it can play. The text right at the end ("Sorry, your browser doesn't support video") only shows up if no format worked at all - that's a sensible fallback for very old browsers.

More useful attributes

width and height: just like for images, to control the display size.
autoplay: starts the video automatically as soon as the page loads (a boolean attribute, like controls).
loop: automatically replays the video from the start once it ends.
muted: starts the video without sound.

Achtung: Be very careful with autoplay! Videos that start automatically with sound are usually very annoying for visitors, and many browsers now automatically block them if muted isn't set. It's best to always keep controls and leave it up to the visitor to decide when the video starts.

Adding a highlight video

Add a video to Finn's page (if you have a video file):

index.html

<h2 id="video">Highlight Video</h2>
<video controls width="500">
  <source src="videos/highlights.mp4" type="video/mp4">
  Sorry, your browser doesn't support video.
</video>

Vorheriges Kapitel Captioned Images: <figure> and <figcaption> Nächstes Kapitel Embedding Sound With <audio>