How to Add Video in HTML5 (The Simple Way to Embed Videos)

Let me guess—you’ve got a cool video and you’re wondering, “How do I put this on my website using HTML5?” I’ve been there! Years ago, I was tweaking HTML tags endlessly, hoping my video would show up properly across all browsers.

Good news: HTML5 makes this super easy now. Let’s walk through it—step by step.

“Adding videos to your website shouldn’t feel like rocket science. I’ll walk you through exactly how to do it with just a few lines of HTML!”

What You’ll Learn

• How the <video> tag works
• Best formats for video compatibility
• How to add controls like play, pause, and loop
• How to embed multiple sources
• Bonus styling tips and recommendations

Prerequisites

Before we dive in, make sure you have:

• A video file (MP4 is best)
• A basic HTML file
• A code editor (I personally love VS Code)

Also, if you’re completely new to web structure, I highly recommend starting with the HTML5 & CSS3 Course or the Front-End Web Development Course before diving deeper into embedding media.

Step-by-Step: How to Add Video in HTML5

Step 1: Prepare Your Video

Make sure your video is in one of the supported formats:

• .mp4 (most widely supported ✅)
• .webm
• .ogg

Place the video in your project directory.

Step 2: Use the <video> Tag

Here’s a basic example:

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
Code language: HTML, XML (xml)

Let’s break it down:

• controls – Adds play/pause/mute UI
• <source> – Points to your video file
• Fallback text – Displays if browser doesn’t support video

Step 3: Add Multiple Formats (For Compatibility)

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
Code language: HTML, XML (xml)

This ensures your video plays on all major browsers.

Step 4: Customize Video Settings

Want autoplay, loop, or muted?

<video width="640" height="360" autoplay loop muted playsinline>
  <source src="video.mp4" type="video/mp4">
</video>
Code language: HTML, XML (xml)

Attributes to Know:

• autoplay – Starts playing automatically
• loop – Repeats when finished
• muted – Starts with no sound (required for autoplay on most browsers)
• playsinline – Plays inside mobile viewports without fullscreen

Styling Your Video

Want to make it look better?

Add a Poster Image:

<video width="640" height="360" controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
</video>
Code language: HTML, XML (xml)

This shows a thumbnail before the video plays.

Apply CSS:

video {
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
Code language: CSS (css)

👉 Want to dive deeper into styling? Check out the Responsive Web Design Course or Bootstrap 5 Course to learn how to make your media mobile-friendly and beautifully responsive.

Add Placeholder Images & Icons

Use free image resources in your projects:

• Placeholder image:
  https://picsum.photos/640/360
  Example:
• Icons (play buttons, etc.):
  Browse https://iconoir.com and download SVGs.
• Fonts for overlay text?
  Try Roboto, Poppins, or Fira Sans from Google Fonts.

Common Video Embedding Mistakes

Here are a few things that tripped me up early on:

• Wrong file path – Make sure your video is in the correct folder (relative paths matter).
• No MIME type – Always declare the video type (video/mp4, video/webm, etc.)
• Autoplay not working – You must include muted for autoplay to work in most browsers.

Recommended Courses for You

Whether you’re just starting or want to master full-stack development, here’s what I’d recommend based on this topic:

Goal	Recommended Courses
🧱 HTML Beginner	HTML5 & CSS3 Course, HTML5, CSS3 & JavaScript Course
🎨 UI/UX Enthusiast	Web Designing Course, Adobe Photoshop Course
🧑‍💻 Full Web Dev Journey	Front-End Web Development Course, Advanced Web Developer Course
💻 CMS & Customization	WordPress Course, WordPress Theme Development Course
📹 Media in Web Projects	Bootstrap 5 Course, Responsive Web Design Course

Final Thoughts

Embedding videos in HTML5 is no longer a hassle. In fact, it’s one of the simplest yet most impactful things you can do to engage your users.

So, go ahead—drop in that product demo, tutorial, or background video. Your website’s about to look way cooler. 😎

Still have questions? I’m always happy to help. Just leave a comment or check out one of the awesome courses listed above.

Useful Resources

• HTML5 Video Spec: MDN Docs
• Images: https://picsum.photos
• Icons: https://iconoir.com
• Fonts: https://fonts.google.com