0
0
HTMLmarkup~15 mins

Video tag basics in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Video tag basics
📖 Scenario: You want to add a video to your webpage so visitors can watch it directly without leaving the page.
🎯 Goal: Build a simple webpage that shows a video using the HTML <video> tag with controls so users can play, pause, and adjust the volume.
📋 What You'll Learn
Use the HTML5 <video> tag
Add a source file with the exact path sample-video.mp4
Include the controls attribute so the user can control playback
Set the video width to 480 pixels
Add a fallback text inside the <video> tag for browsers that do not support video
💡 Why This Matters
🌍 Real World
Embedding videos on websites is common for tutorials, advertisements, or entertainment.
💼 Career
Knowing how to use the video tag is essential for front-end web developers to create rich multimedia experiences.
Progress0 / 4 steps
1
Create the HTML skeleton
Write the basic HTML5 structure with <!DOCTYPE html>, <html lang="en">, <head> with a <title> of "Video Example", and an empty <body>.
HTML
Need a hint?

Start with the basic HTML page structure including <html>, <head>, and <body> tags.

2
Add the video tag with source
Inside the <body>, add a <video> tag with a src attribute set to "sample-video.mp4" and set the width attribute to 480.
HTML
Need a hint?

Use the <video> tag with src="sample-video.mp4" and width="480".

3
Add controls attribute to the video tag
Add the controls attribute inside the existing <video> tag so users can play, pause, and control the volume.
HTML
Need a hint?

Simply add the word controls inside the <video> tag.

4
Add fallback text inside the video tag
Inside the <video> tag, add the text Your browser does not support the video tag. as fallback content for browsers that cannot play videos.
HTML
Need a hint?

Write the fallback text between the opening and closing <video> tags.