Currently Empty: ₹0.00
HTML Video
HTML CODES & EXAMPLES
HTML Video
Learn how to add, control, style and display videos on a webpage using the HTML video element with practical examples.
01
What is HTML Video?
Introduction to video in HTML
HTML provides the
<video>
element for embedding video content directly into a webpage.
The controls attribute provides playback controls
such as play, pause, volume and fullscreen.
Important:
Always provide meaningful fallback content and use appropriate
video formats for better browser compatibility.
02
Basic Video
Add a video to a webpage
basic-video.html
<video controls width="640">
<source
src="video.mp4"
type="video/mp4"
>
</video>
03
Video Width and Height
Set video dimensions
video-size.html
<video
width="800"
height="450"
controls
>
<source
src="lesson.mp4"
type="video/mp4"
>
</video>
04
Video Controls
Show browser playback controls
video-controls.html
<video
src="lesson.mp4"
controls
>
</video>
05
Autoplay Video
Attempt to start video automatically
autoplay-video.html
<video
controls
autoplay
>
<source
src="intro.mp4"
type="video/mp4"
>
</video>
⚠️ Browsers may restrict autoplay, especially when the video
has audible sound.
06
Muted Autoplay
Common pattern for autoplay videos
muted-video.html
<video
controls
autoplay
muted
loop
>
<source
src="background.mp4"
type="video/mp4"
>
</video>
07
Video Loop
Repeat the video automatically
video-loop.html
<video
controls
loop
>
<source
src="lesson.mp4"
type="video/mp4"
>
</video>
08
Video Poster
Show an image before the video starts
video-poster.html
<video
controls
poster="thumbnail.jpg"
>
<source
src="course-intro.mp4"
type="video/mp4"
>
</video>
09
Multiple Video Formats
Provide different formats for compatibility
multiple-video.html
<video controls>
<source
src="lesson.mp4"
type="video/mp4"
>
<source
src="lesson.webm"
type="video/webm"
>
Your browser does not support
HTML video.
</video>
10
Responsive Video
Make video fit different screen sizes
responsive-video.html
<video
controls
style="
width:100%;
height:auto;
"
>
<source
src="lesson.mp4"
type="video/mp4"
>
</video>
11
Responsive Video with CSS
Professional responsive video styling
css-video.html
<style>
.video-box{
width:100%;
max-width:900px;
margin:auto;
}
.video-box video{
width:100%;
height:auto;
display:block;
border-radius:15px;
}
</style>
<div class="video-box">
<video controls>
<source
src="lesson.mp4"
type="video/mp4"
>
</video>
</div>
12
Video with Caption
Use figure and figcaption
video-caption.html
<figure>
<video controls width="700">
<source
src="computer-class.mp4"
type="video/mp4"
>
</video>
<figcaption>
Computer Fundamentals Lesson
</figcaption>
</figure>
13
Video Download Link
Provide a video download option
download-video.html
<a
href="course-video.mp4"
download
>
Download Video
</a>
14
Professional Video Card
Create an educational video card
video-card.html
<div class="video-card">
<video
controls
poster="thumbnail.jpg"
>
<source
src="lesson.mp4"
type="video/mp4"
>
</video>
<div class="video-content">
<span>LESSON 01</span>
<h3>
Introduction to Computers
</h3>
<p>
Learn the basics of computer systems.
</p>
</div>
</div>
<style>
.video-card{
max-width:700px;
overflow:hidden;
border-radius:18px;
background:#fff;
border:1px solid #e1e8f0;
box-shadow:
0 12px 35px rgba(20,50,90,.10);
}
.video-card video{
display:block;
width:100%;
}
.video-content{
padding:20px;
}
.video-content span{
font-size:11px;
color:#1769d5;
font-weight:bold;
}
.video-content h3{
margin:8px 0;
}
.video-content p{
margin:0;
color:#68788c;
}
</style>
15
Video Subtitles with Track
Add captions or subtitles to video
video-track.html
<video controls>
<source
src="lesson.mp4"
type="video/mp4"
>
<track
src="captions.vtt"
kind="subtitles"
srclang="en"
label="English"
default
>
</video>
16
Video Preload
Control how the browser loads video
preload-video.html
<video
controls
preload="metadata"
>
<source
src="lesson.mp4"
type="video/mp4"
>
</video>
17
Important Video Attributes
Quick reference
Attribute
Purpose
Example
controls
Shows playback controls
controls
autoplay
Attempts automatic playback
autoplay
muted
Starts without sound
muted
loop
Repeats the video
loop
poster
Preview image
poster=”image.jpg”
preload
Loading behavior
preload=”metadata”
width
Video width
width=”800″
height
Video height
height=”450″
18
Live HTML Video Runner
Run and preview an HTML video example
LIVE PREVIEW
19
Practice Task
Test your HTML Video skills
🎯 Create an Online Course Video Section
Build a professional video lesson section for an educational website.
- Add a course title.
- Add a responsive video.
- Add a poster image.
- Add video controls.
- Add subtitles.
- Add a lesson description.
- Add a video download button.
- Make the complete section mobile responsive.