HTML5 Video: Embedding Video Content
Want to put a video on your website without relying on YouTube’s embed code or old plugins? That’s exactly what HTML5 video lets you do.
In this beginner-friendly guide, you’ll learn how to:
- Add a basic video to a web page
- Show video controls like play, pause, and volume
- Add a fallback message for older browsers
- Improve the viewing experience with simple options
No prior coding experience is required. You’ll copy, paste, and tweak real examples so you can see your video playing in your own browser.
What is HTML5 Video?
HTML is the language used to structure web pages. HTML5 is the modern version of HTML that adds support for video, audio, and more.
The <video> element is a special HTML tag that tells the browser, “Display a video player here.” Inside it, you point to a video file, like an MP4.
Here’s what a very simple video element looks like:
<video src="movie.mp4"></video>
Of course, we’ll improve this a lot. But that’s the core idea: one tag, one file, and the browser does the rest.
Getting Set Up (Super Simple)
Before we start, you’ll need:
- A text editor – For example, Notepad (Windows), TextEdit (Mac in plain text mode), or any code editor like VS Code.
- A web browser – Chrome, Firefox, Edge, or Safari.
- A video file – For example,
sample.mp4in the same folder as your HTML file.
Tip: Use a short video (5–10 seconds) while you experiment so you can quickly see results.
Example 1: Your First HTML5 Video
Let’s start with a basic HTML page that shows a video.
Create a new file called video-example1.html and paste this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First HTML5 Video</title>
</head>
<body>
<!-- Heading for the page -->
<h1>My First HTML5 Video</h1>
<!-- Basic video element -->
<video src="sample.mp4" width="640" height="360"></video>
</body>
</html>
What each part does
<!DOCTYPE html>tells the browser this is an HTML5 document.<html>,<head>, and<body>are the main building blocks of an HTML page.<h1>is a big heading.<video>is the HTML5 video player. Thesrcattribute points to the file (sample.mp4).widthandheightset the size of the video player in pixels.
What you’ll see
Open this file in your browser (double-click it or right-click > Open with > your browser).
You’ll likely see a blank rectangle where the video should be, but no play button. That’s because we haven’t told the browser to show controls yet.
Example 2: Adding Controls and a Fallback Message
To let users play, pause, and adjust volume, you need the controls attribute.
Update your file or create a new one called video-example2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Video with Controls</title>
</head>
<body>
<h1>HTML5 Video with Controls</h1>
<video src="sample.mp4" width="640" height="360" controls>
<!-- Fallback text for very old browsers -->
Sorry, your browser doesn't support embedded videos.
</video>
</body>
</html>
New things we added
controls– Tells the browser to show play, pause, volume, and a progress bar.- The text inside
<video> ... </video>– This is a fallback message. It appears only in old browsers that don’t understand the<video>element.
What you’ll see
Refresh the page in your browser. You should now see:
- A video player with play/pause button
- A timeline showing progress
- Volume control and maybe a fullscreen button (depends on the browser)
Click Play and enjoy your video. That’s your first real HTML5 video player.
Try It Yourself: Change the Size
Experiment by changing the size of the video player.
In the <video> tag, adjust the width and height:
<video src="sample.mp4" width="320" height="180" controls>
Sorry, your browser doesn't support embedded videos.
</video>
- 320x180 is a smaller, more compact player.
- You can try other values like 800x450.
Refresh your browser each time to see the difference. Small tweaks like this help you feel more comfortable editing code.
Example 3: Using the <source> Element and Multiple Formats
Different browsers can prefer different video formats. The most common one is MP4, but some browsers might also use WebM or Ogg.
To provide more than one option, you use <source> tags inside the <video> tag. The browser will try them from top to bottom until it finds one it can play.
Create a new file called video-example3.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Video with Multiple Sources</title>
</head>
<body>
<h1>HTML5 Video with Multiple Sources</h1>
<video width="640" height="360" controls>
<!-- First try MP4 -->
<source src="sample.mp4" type="video/mp4">
<!-- Then try WebM -->
<source src="sample.webm" type="video/webm">
<!-- Fallback text if none of the formats work -->
Sorry, your browser doesn't support HTML5 video.
</video>
</body>
</html>
What each part does
<source src="sample.mp4" type="video/mp4">srcpoints to the video file.typetells the browser what kind of file it is.
- The browser reads each
<source>and picks the first one it knows how to play.
Note: You’ll need matching video files (for example,
sample.mp4andsample.webm) in the same folder for both sources to work. If you don’t have them, the first existing one will be used.
Example 4: Autoplay, Loop, and Muted
Now let’s look at a few extra attributes that control how the video behaves:
autoplay– Start playing as soon as the page loads.loop– Play again automatically when the video ends.muted– Start the video with the sound off.
Here’s a simple example combining them:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Video Behavior Options</title>
</head>
<body>
<h1>Autoplaying, Looping, Muted Video</h1>
<video src="sample.mp4" width="480" height="270" controls autoplay loop muted>
Sorry, your browser doesn't support embedded videos.
</video>
</body>
</html>
Important notes
- Many browsers only allow autoplay if the video is muted. That’s why
mutedis often used together withautoplay. loopsimply restarts the video each time it finishes.
Try removing one attribute at a time and refreshing the page to see how the behavior changes.
Try It Yourself: Create a Mini Video Gallery
Now that you know the basics, build a tiny “video gallery” with two videos on the same page.
Use this as a starting point:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Video Gallery</title>
</head>
<body>
<h1>My Video Gallery</h1>
<h2>Video 1</h2>
<video src="video1.mp4" width="320" height="180" controls>
Sorry, your browser doesn't support embedded videos.
</video>
<h2>Video 2</h2>
<video src="video2.mp4" width="320" height="180" controls>
Sorry, your browser doesn't support embedded videos.
</video>
</body>
</html>
Change the file names (video1.mp4, video2.mp4) to your own videos and adjust the headings. You’ve now created a simple multi-video page.
Celebrate this win—you’re already doing real web development.
Common Issues and Quick Fixes
Here are a few problems beginners often hit, with simple solutions:
The video doesn’t show at all
- Check the file name and extension:
sample.mp4vsSample.MP4(case can matter on some systems). - Make sure the video file is in the same folder as your HTML file.
- Check the file name and extension:
The player appears but won’t play
- Try another browser to see if it’s a format issue.
- Convert your video to MP4 (H.264) using a free converter.
The video is huge or tiny
- Adjust the
widthandheightattributes. - Keep the same aspect ratio (for example, 640x360, 320x180) so it doesn’t look stretched.
- Adjust the
What’s Next?
You’ve learned how to:
- Create a basic HTML5 video player with the
<video>element - Show built-in browser controls
- Add fallback text for older browsers
- Provide multiple video formats with
<source> - Control behavior with attributes like
autoplay,loop, andmuted
From here, you can explore:
- Styling your video with CSS (borders, centering, responsive sizes)
- Custom video controls using JavaScript
- Hosting videos on platforms like YouTube or Vimeo and embedding them alongside your own HTML5 videos
For now, keep experimenting. Change sizes, add more videos, and play with attributes. Every small change you make and understand is a real step forward in learning to code.
