How to Add Video in HTML (With Examples)

Quick Scoop: You add video in HTML mainly with the <video> tag for your own files, or with an <iframe> when embedding from platforms like YouTube.

[1][4][7][9]

What You’ll Learn

Basic <video> tag to show an MP4 with controls.
Useful attributes: controls, autoplay, loop, muted, poster, width, height.
How to embed YouTube-style videos using <iframe>.
Practical tips to avoid “video not working” problems.

1\. The Standard Way: <video> Tag

This is how you add your own video file (for example, movie.mp4) to a web page.

[7][1][4]

<!DOCTYPE html> <html> <head>
<title>Add Video in HTML</title> </head> <body>
<h1>My First HTML Video</h1> <video width="640" height="360"
controls> <source src="movie.mp4" type="video/mp4"> <source
src="movie.webm" type="video/webm"> Your browser does not support the video
tag. </video> </body> </html>

What’s happening here?

[1][4][9]

<video>: Creates the built‑in HTML video player.
width / height: Sets the size (in pixels).
controls: Shows play, pause, volume, etc.
<source>: Allows multiple formats (MP4, WebM, Ogg) so more browsers can play it.
Fallback text: Shown if the browser can’t play HTML5 video.

On many modern websites, MP4 (H.264) is the most common and widely supported format, but having WebM as a backup improves compatibility.[4][1]

2\. Useful <video> Attributes You’ll Actually Use

Here’s a more advanced example with autoplay, loop, and poster image.

[7][1][4]

<video controls
autoplay muted loop width="640" height="360" poster="thumbnail.jpg" >
<source src="promo.mp4" type="video/mp4"> <source src="promo.webm"
type="video/webm"> Your browser does not support HTML5 video.
</video>

autoplay: Starts playing as soon as possible.
muted: Mutes sound; many browsers require this for autoplay to work.
loop: Restarts the video when it finishes.
poster: Image displayed before the video plays (like a thumbnail).

In real-world pages, developers often combine autoplay, muted, and loop to create silent hero videos in the header.

[7][4]

3\. Embedding YouTube or External Video with <iframe>

If the video lives on YouTube, Vimeo, etc., the usual pattern is to embed it with an <iframe> instead of hosting the file yourself.

[5][1]

<!DOCTYPE html> <html>
<head> <title>Embed YouTube Video</title> </head>
<body> <h2>YouTube Video Embed</h2> <iframe width="560"
height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen
></iframe> </body> </html>

You replace VIDEO_ID with the ID from the YouTube URL.
allowfullscreen lets the user open the video full screen.
width / height control the visible frame size.

Forum discussions often recommend using platform‑provided embed code for analytics, captions, and better streaming performance instead of self‑hosting when possible.[6][5]

4\. Adding Subtitles / Captions with <track>

You can add subtitles or captions using the <track> element inside <video>.

[7]

<video
controls width="640" height="360"> <source src="movie.mp4"
type="video/mp4"> <track src="subtitles-en.vtt" kind="subtitles"
srclang="en" label="English" default > Your browser does not support HTML5
video. </video>

kind="subtitles": Defines the type of text track.
srclang: Language code (for example, en, es).
default: Makes this track enabled by default.

The text track file usually uses the WebVTT format, which browsers understand for time‑synced subtitles.

[7]

5\. Common Problems & Quick Fixes

Here are frequent “why is my video not showing?” issues and how people fix them in practice.

[6][1][7] [6] [6] [9][7] [4][7] [6] [6] [1][4] [1][4]

Problem	Likely Cause	Fix
Blank or broken video player	Wrong file path or file name.	Check `src`, file extension, and folder structure; e.g., `videos/video.mp4`.
Video won’t autoplay	Browser blocks autoplay with sound.	Add `muted`, and keep `autoplay`.
Works locally, fails on server	Server not serving `.mp4` with correct MIME type.	Configure server to serve `video/mp4` for `.mp4` files.
Some browsers play, others don’t	Only one video format provided.	Provide MP4 plus at least one alternative format like WebM.

6\. Simple “Copy–Paste” Templates

Template: Local MP4 with Controls

<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4"> Your browser does not support
the video tag. </video>

Template: Looping Background Video (Muted Autoplay)

<video autoplay muted loop
playsinline width="100%" > <source src="background.mp4"
type="video/mp4"> Your browser does not support the video tag.
</video>

playsinline is commonly used on mobile devices so the video can play inside the page rather than always going fullscreen.

[9]

7\. Multiple Approaches at a Glance

[9][4][1] [4][1][7] [7] [5][1] [5] [5]

Method	Best For	Pros	Cons
`<video>` \+ `<source>`	Self‑hosted MP4/WebM/Ogg files.	Full control, HTML5 native player, supports captions with `<track>`.	You handle storage, bandwidth, and encoding.
`<iframe>` (YouTube, etc.)	Public/embedded videos from a platform.	Free hosting/streaming, easy to share, built‑in player features.	Less visual control, third‑party branding and tracking.

8\. Mini Story: From “Why Won’t It Play?” to “Oh, It Works”

Imagine you drop movie.mp4 into your project, write a quick <video> tag, open the page, and see… nothing.

You stare at the empty box, tweak some attributes, maybe even suspect your browser is cursed. Then you notice your file is inside a media/ folder but your src just says "movie.mp4"; you correct it to "media/movie.mp4", reload, and suddenly the controls appear and the video plays smoothly.

[1][6]

This sort of path mismatch is one of the most common “mystery bugs” people discuss in Q&A forums about HTML video.

[6][7]

SEO & Meta Description

Example meta description for your article about “how to add video in html”:

<meta name="description" content="Learn how to add video in HTML
using the video tag and iframe embeds. Step-by-step examples for MP4 files,
YouTube videos, subtitles, autoplay, and loop.">

This kind of description keeps the phrase “how to add video in html” while staying natural and reader‑friendly.

[4][1]

TL;DR

Use <video> with one or more <source> elements for local files.
Add controls, and optionally autoplay, muted, loop, and poster.
Use <iframe> to embed YouTube or similar video sources.
Check file paths, formats, and server configuration if the video doesn’t play.

Bottom note: Information gathered from public forums or data available on the internet and portrayed here.

how to add video in html