Tag video

🎬 HTML <video> Tag — Embedding Videos on Your Webpage

The <video> tag in HTML allows you to embed video content directly into your webpage. It supports various video formats and provides built-in controls for playback, making it easy to add multimedia to your site without relying on external plugins.

📌 What Is the <video> Tag?

  • Used to embed video files such as MP4, WebM, and Ogg.
  • Provides native browser controls like play, pause, volume, and fullscreen.
  • Supports multiple source formats within the same tag for cross-browser compatibility.
  • Can include fallback content for browsers that don’t support video.

✅ Basic Syntax

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

🧪 Example: Video with Controls and Poster

<video controls width="640" height="360" poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  Your browser does not support HTML5 video.
</video>
  • controls: Displays built-in playback controls.
  • poster: Image shown before the video plays.
  • width and height: Define the video display size.

🎨 Attributes of <video>

AttributeDescription
srcURL of the video file (can be omitted if using <source>)
controlsShows default playback controls
autoplayStarts playing automatically when ready
loopRepeats the video indefinitely
mutedMutes the video sound
posterURL of the image displayed before playback
width / heightSets display dimensions

🔄 Multiple Sources for Compatibility

Providing multiple video formats ensures your video plays across different browsers:

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogv" type="video/ogg" />
  Your browser does not support the video tag.
</video>

⚠️ Best Practices

  • Always include multiple formats (mp4, webm, and ogg) for wide browser support.
  • Provide meaningful fallback content inside the <video> tag.
  • Use the poster attribute to improve user experience by showing a preview image.
  • Avoid autoplay with sound; many browsers block such videos for accessibility.
  • Add captions or subtitles with <track> for accessibility.

🏁 Summary

The <video> tag is a powerful, native HTML element for embedding videos on your website. It provides control and flexibility for multimedia content, enhancing user engagement without relying on third-party plugins.