HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Images and Media

HTML Video

The HTML <video> element allows you to embed videos directly on web pages without relying on external plugins. You can display movies, tutorials, animations, or any video content. <video> supports multiple formats, provides built-in controls, and can autoplay, loop, or be muted for a better user experience.

HTML <video> Syntax

HTML Video Example

html

<video controls>
  <source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.mp4" type="video/mp4">
  <source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Explanation

  • <video>: The container for video content.
  • controls: Displays standard video controls like play, pause, volume, and fullscreen.
  • <source>: Specifies video files and types. Multiple sources improve browser compatibility.
  • Fallback text: Displayed if the browser does not support the <video> element.

Attributes of <video>

  • controls: Shows video controls.
  • autoplay: Starts playing automatically when the page loads.
  • loop: Plays video repeatedly.
  • muted: Mutes the video initially.
  • poster: Displays an image before the video starts.
  • width / height: Sets the size of the video player.

Example with Multiple Attributes

html

<video width="640" height="360" controls autoplay muted loop poster="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_thumbnail.png">
  <source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.mp4" type="video/mp4">
  <source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Supported Video Formats

  1. MP4 - most widely supported across all browsers.
  2. WebM - modern, open-source format with good compression.
  3. OGG / OGV - older open-source format.

⚠️ Tip: Provide multiple formats to ensure all browsers can play your video.

Example: Complete HTML Video Player

HTML Video Complete Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Video Example</title>
</head>
<body>

<h2>Watch Our Tutorial Video</h2>
<video width="640" height="360" controls poster="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_thumbnail.png">
  <source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.mp4" type="video/mp4">
  <source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<p>Enjoy the video directly in your browser with built-in controls!</p>

</body>
</html>

Advantages

  • Embed videos without third-party plugins.
  • Cross-browser support with multiple source formats.
  • Customizable playback with attributes like controls, autoplay, loop, and poster.
  • Enhances engagement and user experience on your website.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesPartially

Conclusion

The HTML <video> element allows seamless video integration for websites.
Using multiple formats, the controls attribute, and optional features like poster and autoplay ensures your content is accessible, engaging, and compatible across modern browsers.

Videos make your web pages dynamic, interactive, and professional, all without additional plugins.

PreviousHTML AudioNextHTML Embed & Object