Module 3: Links and Media · Lesson 6 of 8
HTML Video and Audio Tags: Embed Media with Controls
All lessons in Module 3
Goal: Add video and audio with controls, several sources and fallback text.
Learn
<video> and <audio> play media right in the page (opens in a new tab). Add the controls attribute, or visitors get no play button. controls is a boolean attribute, so its name alone is enough. It takes no value.
Not every browser plays every file format, so you can list several <source> elements inside. The browser plays the first one it understands:
<video controls width="400"> <source src="clip.webm" type="video/webm"> <source src="clip.mp4" type="video/mp4"> Sorry, your browser cannot play this video. </video>
The text at the end is fallback content, shown only by browsers that cannot play video at all. Avoid autoplay with sound. Nobody likes a page that shouts at them.
The short version
<video>and<audio>play media directly in the page.- Add the boolean
controlsattribute, or visitors get no play button. - List several
<source>elements in different formats. The browser plays the first one it supports. - Text inside the element is fallback content for browsers that cannot play media at all.
Example
<video controls width="400">
<source src="flower.webm" type="video/webm">
<source src="flower.mp4" type="video/mp4">
Sorry, your browser cannot play this video.
</video>Your task
Bring this nature page to life:
- Right after the first paragraph, add a
<video>withcontrolsand two<source>elements:flower.webmandflower.mp4. - Put fallback text inside the video, after the sources.
- Right after the second paragraph, add an
<audio>withcontrolsthat playst-rex-roar.mp3.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<video src="https://www.youtube.com/watch?v=abc123" controls></video>Right
<iframe src="https://www.youtube.com/embed/abc123" title="Flower timelapse video" width="560" height="315"></iframe>A YouTube address is a web page. video needs a media file, so use the embed code the site offers: an iframe.
Wrong
<video src="flower.mp4" autoplay></video>Right
<video src="flower.mp4" autoplay muted loop playsinline></video>Browsers block autoplay with sound, so an autoplaying video must be muted. The playsinline attribute keeps it in the page on iPhones.
Go deeper
Media needs text alternatives, the same as images. Add captions to a video with the <track> element: <track kind="captions" src="captions.vtt" srclang="en" label="English">. The captions live in a simple WebVTT (opens in a new tab) text file. They help deaf and hard-of-hearing viewers, people watching with the sound off, and non-native speakers. For audio, such as a podcast, publish a transcript on the page.
Three more attributes come up often. poster="image.jpg" shows a picture before the video starts. preload="none" tells the browser not to download anything until the visitor presses play. On a page with several videos, that saves a lot of data. Give a video only a width and the browser keeps its proportions automatically. The video reference lists every attribute.
Video files are large. Serving them yourself can be slow and expensive. Many sites upload long videos to a video platform, embed them from there, and keep the <video> element for short clips and background loops.
Export short web clips at the size they will be shown. A 4K file displayed 400 pixels wide wastes most of its download.
Frequently asked questions
How do I add a video to my HTML page?
Use the <video> element with controls and a src pointing to the video file: <video controls width="400" src="clip.mp4"></video>. For wider support, use <source> elements inside instead of src. To show a video from YouTube or Vimeo, paste their embed code instead, as shown in Embedding with iframe.
Why won't my video autoplay in HTML?
Browsers block videos that start playing with sound, because unexpected noise annoys people. Muted autoplay is allowed, so add muted next to autoplay, plus playsinline so iPhones play it inside the page instead of full screen. Even then, give visitors a way to pause it: controls is the easiest.
Which video and audio formats should I use for the web?
MP4 with H.264 video plays in every current browser, so always provide it. WebM is often smaller and has wide browser support (opens in a new tab). List it first and MP4 second, and each browser picks the first one it supports. For audio, MP3 works everywhere. Always set the type attribute on each <source>, so the browser can skip formats without downloading them.