Integrate Video in HTML: The <video> Tag
Learn to embed and control videos on your web pages using the <video> tag and make your content more engaging.
/* Ready to add some action? */The <video> Element
The <video> tag is the standard HTML5 element for embedding a video player. At its simplest, you just need the src attribute to point to your video file, but that's just the beginning.
Essential Attributes
Attributes are modifiers that change the video player's behavior. The most common are controls (to show play/pause/volume), autoplay (to start automatically, often needs muted), loop (to repeat), and poster (an image placeholder).
Compatibility with <source>
Not all browsers support the same video formats. To ensure compatibility, you can provide multiple video files using the <source> tag inside the <video> element. The browser will use the first format it understands.
User Experience and Fallbacks
Good user experience is key. Use the poster attribute to show an image before the video loads. Also, always include fallback text (e.g., "Your browser doesn't support the video tag.") between the opening and closing <video> tags for older browsers.
Practice Zone
Interactive Test 1: Attribute Assembly
Drag the attributes to complete the video tag that plays automatically and has controls.
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Build the Element
Rellena los huecos en cada casilla.
< controls> <source src="journey.mp4" type="video/mp4"> <source src="journey.webm" type="video/webm"> Your browser does not support the video . </>
Practice Example: Code Editor
Create a complete video element that includes a poster image, controls, and provides both MP4 and WebM source files.
Video in Practice
Embedding a video is just the first step. For a professional result, you need to consider performance, responsiveness, and accessibility.
1. Responsive Videos
You don't want your video to break your page layout on small screens. A simple CSS rule can make your video fluidly resize with its container.
/* CSS */
video {
max-width: 100%;
height: auto;
}2. Performance Matters: Compression
Video files are large and can slow down your site. Always compress videos before uploading. Tools like HandBrake can significantly reduce file size without losing much quality. Providing WebM format is also great for performance.
50 MB
Original
8 MB
Compressed
3. Accessibility with the <track> Tag
To make your videos accessible to everyone, including users with hearing impairments, use the <track> tag to add captions, subtitles, or descriptions. This tag points to a WebVTT file (`.vtt`) that contains the timed text.
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English">
</video>Practical Takeaway: A great video implementation is responsive, optimized for performance, and accessible. These practices elevate your website from functional to exceptional.
HTML Video Glossary
- <video>
- The main container element for embedding video content.
- <source>
- Used inside
<video>to specify multiple alternative video files. The browser will use the first one it supports. - <track>
- Specifies timed text tracks (like subtitles or captions) for the video.
- `controls`
- A boolean attribute that, when present, displays the browser's default video controls (play, pause, volume, etc.).
- `autoplay`
- A boolean attribute that attempts to start the video automatically. It usually must be paired with the
mutedattribute to work. - `muted`
- A boolean attribute that mutes the audio output of the video by default.
- `loop`
- A boolean attribute that causes the video to automatically restart from the beginning once it ends.
- `poster`
- An attribute that specifies the URL of an image to be shown while the video is downloading, or until the user hits play.