How to Add a Video in HTML

Use the <video> element when you want to display a playable video directly on a web page. This works well for tutorials, product demos, course previews, and marketing clips.

What you’ll build or solve

You’ll learn how to add a video in HTML with the <video> tag and a <source> file. You’ll also know how to show playback controls so users can play, pause, and skip through the video.

When this approach works best

This approach is the right choice when you want visitors to watch a video without leaving the page.

Common real-world scenarios include:

• Product demo videos
• Course lesson previews
• Homepage explainer videos
• Company introduction clips
• Tutorial walkthroughs

This is a bad idea when you only want to link to a video on another platform. In that case, a normal <a> link may be enough.

Prerequisites

You only need:

• A basic HTML file
• A video file, such as .mp4
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Add the <video> tag with a <source> file

Use the <video> element and place a <source> tag inside it that points to your video file.

<video controls>
  <source src="intro-video.mp4" type="video/mp4">
</video>

To set the video size, add width or height to the <video> tag.

<video controls width="640">
  <source src="product-demo.mp4" type="video/mp4">
</video>

What to look for:

• controls shows the play, pause, volume, and timeline controls
• <source> points to the video file
• type="video/mp4" tells the browser the file format
• Put fallback text inside <video> for browsers that cannot play the file
• Keep the video file path correct, especially if it is in another folder

Examples you can copy

Course preview video

<video controls width="700">
  <source src="course-preview.mp4" type="video/mp4">
</video>

Product demo

<video controls width="600">
  <source src="app-demo.mp4" type="video/mp4">
</video>

Company intro clip

<video controls width="800">
  <source src="company-intro.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Common mistakes and how to fix them

Mistake 1: Forgetting the controls attribute

What the reader might do:

<video>
  <source src="intro-video.mp4" type="video/mp4">
</video>

Why it breaks: the video may appear, but users do not get visible playback controls.

Corrected approach:

<video controls>
  <source src="intro-video.mp4" type="video/mp4">
</video>

Mistake 2: Using the wrong file path

What the reader might do:

<video controls>
  <source src="videos/demo.mp4" type="video/mp4">
</video>

Why it breaks: if the file is not actually in the videos folder, the browser cannot load it.

Corrected approach:

<video controls>
  <source src="demo.mp4" type="video/mp4">
</video>

Use the real path to the file based on where your HTML file is stored.

Mistake 3: Leaving out the file type

What the reader might do:

<video controls>
  <source src="intro-video.mp4">
</video>

Why it breaks: some browsers rely on the type value to understand the video format more reliably.

Corrected approach:

<video controls>
  <source src="intro-video.mp4" type="video/mp4">
</video>

Troubleshooting

If the video does not appear, check that the file path in src is correct.

If the video appears but does not play, confirm the file format is supported, such as .mp4.

If users cannot control playback, add the controls attribute.

If the video is too large, set a width value on the <video> tag.

Quick recap

• Use <video> to place a video on the page
• Add a <source> tag inside it
• Use controls so users can play and pause the video
• Set the correct file path and file type
• Add fallback text for unsupported browsers