HTML · Module 06 · Lesson 26 of 54

Video Players & Properties

What is the Video Element?

Think of a television set. It needs a power switch, volume controls, a screen, and a media source (like a DVD player) plugged into it.

In HTML, the <video> element embeds video playback directly on your page:

controls: Displays play, pause, fullscreen, and volume toggles.

muted: Mutes the audio by default (highly recommended).

autoplay: Starts playing the video automatically as soon as the page loads.

loop: Starts the video over from the beginning once it ends.

Why does it matter?

Natively embedding videos allows you to show product demos, background animations, or video guides directly on your page. To prevent autoplaying videos from annoying users, modern browsers will only allow autoplay to work if the muted attribute is also present.

How to write it

Define the video container with attributes and specify the source file:

<video controls muted width="300">
  <source src="clip.mp4" type="video/mp4">
</video>

Mute 🔇 Fullscreen 🖥️

Common Mistakes

Trying to autoplay without muting: Browsers block audio from playing automatically without user interaction. If you don't add muted, your autoplay attribute will be completely ignored.

Not providing widths and heights: If you don't specify size attributes, the page layout might jump and shift around when the video loads.

Quick Reference

<video controls> — Outer video container.

<source src="file.mp4" type="video/mp4"> — Video source path and mime-type.

autoplay, muted, loop — Common playback attributes.

Your Task

Create a `<video>` element with `controls`, `muted`, and a `width` of '300'. Inside it, place a `<source>` with `src="clip.mp4"` and `type="video/mp4"`.

index.html

Type code above to start the lesson.

Live Preview