HTML video Tag: How to Embed Video in a Web Page

The video tag in HTML plays video files directly in the browser. It adds custom playback without third-party services or plugins.

Understand the <video> Tag in HTML

The <video> tag plays video files inside a web page and supports controls. That lets users play and pause. Also, it enables users to change the volume. It works with most modern browsers.

You write it like this:

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

This shows a built-in player and plays the file from the src value.

So, how does the <source> tag work inside <video>?

Use multiple <source> tags inside a <video> tag to support more file types. Here is an example:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

The browser picks the first format it supports.

Add text between the tags to show a message if the browser fails to load the video.

For example:

<video controls>
  <source src="clip.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

The Difference Between <video> and Third-Party Embeds

The <video> tag stores and plays your own files. It does not need YouTube or other services. You get more control over design and playback.

While the third-party embeds need an external link. They depend on other websites. The layout and ads come from outside your page.

Here are common formats that are used in <video> Tag:

• .mp4 (works in all browsers)
• .webm (works in Chrome, Firefox, and Edge)
• .ogg (works in Firefox and some others)

Use two or more <source> tags to support more users. The <track> tag adds captions or subtitles.

Here is an example:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subs.vtt" kind="subtitles" srclang="en" label="English">
</video>

Set kind to subtitles and label. Also, set srclang to language code to show the language name.

Use aria-label or aria-describedby to describe the video for screen readers. Here is an example:

<video src="clip.mp4" controls aria-label="Product demo video"></video>

This helps users understand the purpose of the video.

Common Attributes of <video>

The src attribute:

It points to the video file:

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

The controls attribute:

It adds playback buttons:

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

The autoplay attribute:

It starts playback when the page loads:

<video src="demo.mp4" autoplay muted></video>

Most browsers block autoplay unless muted.

The loop attribute:

Repeats the video after it ends:

<video src="demo.mp4" loop></video>

The muted attribute:

Starts with audio off:

<video src="demo.mp4" muted></video>

The poster attribute:

Shows an image before the video plays:

<video src="demo.mp4" poster="thumb.jpg" controls></video>

The preload attribute:

Tells the browser how to load the file:

<video src="demo.mp4" preload="metadata"></video>

Set the value to auto, metadata, or none.

How to Style the <video> Tag in HTML

You can style the video tag with CSS. Here are some of the common CSS attributes that are used to change the UI design of the video tag:

• width
• height
• border

Here is an example:

<style>
  video.custom-player {
    width: 100%;
    max-width: 600px;
    border: 2px solid #000;
    border-radius: 8px;
    display: block;
    margin: 20px auto;
  }
</style>

<video class="custom-player" controls>
  <source src="video.mp4" type="video/mp4">
</video>

This adds a custom style to the video.

Examples of the <video> Tag in HTML

Basic Playback with Poster:

<video controls poster="preview.jpg" width="500">
  <source src="intro.mp4" type="video/mp4">
</video>

This shows a poster image before playback. It plays the MP4 file with default controls.

Multiple Formats with Fallback Text:

<video controls width="600">
  <source src="clip.mp4" type="video/mp4">
  <source src="clip.webm" type="video/webm">
  Your browser does not support video playback.
</video>

This uses .mp4 and .webm. It helps reach more browsers and shows a message if playback fails.

Loop Background Video with No Controls:

<video autoplay muted loop playsinline>
  <source src="bg-loop.mp4" type="video/mp4">
</video>

This runs a background video in silence. It plays in a loop and has no controls. Use it in hero banners or page headers.

Video with Captions and Custom Style:

<style>
  .video-captioned {
    width: 100%;
    max-width: 800px;
    outline: 2px solid #333;
  }
</style>

<video class="video-captioned" controls>
  <source src="lesson.mp4" type="video/mp4">
  <track src="captions.vtt" kind="subtitles" srclang="en" label="English">
</video>

This plays a video with English subtitles and a custom border. It fits large screens but stays responsive.

Wrapping Up

In this article, you learned how the <video> tag works and how to write it. You also saw how to style it and use captions.

Here is a quick recap:

• The <video> tag adds local video playback.
• Use <source> for multiple formats.
• Add fallback text for unsupported browsers.
• Include track for captions.
• Style the video with simple CSS.

FAQs

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

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

<video src="video.mp4" controls poster="thumbnail.jpg">
  Your browser does not support the video tag.
</video>

<video src="video.mp4" autoplay muted>
  Your browser does not support the video tag.
</video>

Similar Reads