What are Media Elements?
HTML5 lets you add videos and audio directly without plugins like Flash.
Video Tag:
1<!-- Basic video with controls -->
2<video width="640" height="360" controls>
3 <source src="my-video.mp4" type="video/mp4">
4 <source src="my-video.webm" type="video/webm">
5 Your browser does not support the video tag.
6</video>
7
8<!-- Advanced video with all options -->
9<video width="640" height="360"
10 controls <!-- Shows play/pause buttons -->
11 autoplay <!-- Starts playing automatically (usually needs muted) -->
12 loop <!-- Repeats forever -->
13 muted <!-- Starts with no sound -->
14 poster="thumbnail.jpg" <!-- Shows image before play -->
15 preload="metadata"> <!-- Loads only video info, not the whole video -->
16 <source src="video.mp4" type="video/mp4">
17</video>Video attributes explained:
Attribute | What it does | When to use |
|---|---|---|
| Shows play, pause, volume buttons | Always use for user control |
| Starts playing as soon as page loads | Background videos (usually with muted) |
| Plays again and again | Background videos, short clips |
| Starts with sound off | Required for autoplay in most browsers |
| Shows thumbnail before play | To show preview image |
| "auto", "metadata", or "none" | "metadata" is best for performance |
Audio Tag:
1<!-- Basic audio -->
2<audio controls>
3 <source src="my-song.mp3" type="audio/mpeg">
4 <source src="my-song.ogg" type="audio/ogg">
5 Your browser does not support the audio tag.
6</audio>
7
8<!-- Background music (usually muted autoplay) -->
9<audio controls autoplay loop>
10 <source src="background-music.mp3" type="audio/mpeg">
11</audio>YouTube Embed:
1<iframe width="560" height="315"
2 src="https://www.youtube.com/embed/VIDEO_ID_HERE"
3 title="YouTube video"
4 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
5 allowfullscreen>
6</iframe>How to get YouTube embed code:
Go to any YouTube video
Click "Share" button
Click "Embed"
Copy the code