html
/

HTML Video: Embedding Videos in Web Pages

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Video: Embedding Videos in Web Pages

What is HTML Video?

HTML video allows you to embed video content directly into web pages using the <video> tag without relying on external plugins.

Basic Syntax

HTMLRead-only
1
<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Video Attributes

AttributeDescription
controlsDisplays play/pause controls
autoplayStarts video automatically
loopRepeats video
mutedStarts video muted
posterThumbnail image before play
width/heightSets video dimensions

Supported Video Formats

FormatType
MP4video/mp4
WebMvideo/webm
OGGvideo/ogg

Multiple Source Example

HTMLRead-only
1
<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Poster Attribute Example

HTMLRead-only
1
<video controls poster="thumbnail.jpg" width="400">
  <source src="video.mp4" type="video/mp4">
</video>

Autoplay and Muted Example

HTMLRead-only
1
<video autoplay muted loop>
  <source src="video.mp4" type="video/mp4">
</video>

Fallback Text

Fallback text is shown if the browser does not support the video tag.

HTMLRead-only
1
<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

Best Practices

  • Use MP4 format for maximum compatibility
  • Provide multiple sources for fallback
  • Avoid autoplay with sound
  • Use poster images for better UX
  • Optimize video size for performance

Common Mistakes

  • Using unsupported formats
  • Not including controls
  • Large video files causing slow load
  • Forcing autoplay with sound

Conclusion

HTML video enables seamless multimedia integration in web pages. Proper usage ensures compatibility, performance, and improved user experience.

Try it yourself

<video controls width="300">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

Test Your Knowledge

Q1
of 3

Which tag is used for video?

A
<media>
B
<video>
C
<movie>
D
<play>
Q2
of 3

Which attribute shows controls?

A
play
B
controls
C
show
D
visible
Q3
of 3

Which format is widely supported?

A
MP4
B
TXT
C
DOC
D
JPG

Frequently Asked Questions

What is the <video> tag?

It is used to embed video content in web pages.

Which video format is best?

MP4 is the most widely supported format.

Why use muted with autoplay?

Browsers often block autoplay with sound, so muted ensures it works.

Previous

html audio

Next

html iframe

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.