What is Video tag basics in HTML?

HTMLmarkup~5 mins

Video tag basics in HTML

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

The <video> tag lets you show videos right on a webpage without extra tools.

You want to add a tutorial video to your website.

You need to show a product demo video on a page.

You want visitors to watch a short clip without leaving your site.

You want to add background videos to make your site lively.

You want to provide video content that works on all devices.

Syntax

HTML

<video src="video.mp4" controls></video>

The src attribute points to the video file.

The controls attribute adds play, pause, and volume buttons automatically.

Examples

Basic video with controls so users can play or pause.

HTML

<video src="movie.mp4" controls></video>

Video that plays automatically, without sound, and repeats forever.

HTML

<video src="clip.webm" autoplay muted loop></video>

Multiple sources for better browser support and fallback text if video is not supported.

HTML

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

Sample Program

This page shows a video with controls. It uses two video formats for better browser support. The video resizes nicely on different screen sizes.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Tag Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f0f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    video {
      max-width: 100%;
      height: auto;
      border: 2px solid #333;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Watch this sample video</h1>
  <video controls>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    Sorry, your browser does not support the video tag.
  </video>
</body>
</html>

OutputSuccess

Important Notes

Always include multiple <source> tags with different video formats for best browser support.

Use the controls attribute to give users easy control over the video.

Make sure your video files are optimized for web to load quickly.

Summary

The <video> tag lets you embed videos directly on your webpage.

Use controls to add play and pause buttons automatically.

Provide multiple video formats inside <source> tags for better compatibility.