• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Video

← Previous Next →

HTML provides a simple and reliable way to play videos directly on a webpage without needing plugins or external media players. The <video> element allows you to embed MP4, WebM or Ogg files and control playback with attributes like autoplay, loop, controls and muted. This chapter explains how to embed videos, adjust layout, add fallback text, manage multiple file formats and improve user experience on different devices.

The <video> element

The <video> tag is used to add video content inside an HTML page. It works in all modern browsers. A basic example looks like this:

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

The src attribute tells the browser where the video file is located, and controls enables the default play, pause and volume buttons. Without controls, the user cannot play the video unless you enable autoplay.

Adding width and height

Just like images, videos can be sized using width and height attributes. This helps maintain layout consistency and prevents layout shifts when the page loads.

<video src="movie.mp4" width="600" height="350" controls></video>

If you want the video to adjust based on screen size, you can use percentages:

<video src="movie.mp4" width="100%" controls></video>

This makes the video flexible across desktops, tablets and mobile screens.

Using multiple video formats

Different browsers support different video formats. To ensure that the video plays everywhere, you can provide multiple sources inside the <video> tag. The browser automatically chooses the first format it supports.

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

This improves compatibility and ensures that your video loads even in older browsers.

Adding fallback text

If a browser cannot play the video, you can display a fallback message. This text is shown inside the <video> element and appears only when the video fails to load.

<video src="movie.mp4" controls>
    Sorry, your browser cannot play this video.
</video>

Fallback text is useful for users on older devices or restricted networks.

Common video attributes

The <video> tag supports several useful attributes that change how the video behaves.

controls

Shows basic playback buttons.

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

autoplay

Starts the video automatically as soon as it loads.

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

Browsers usually require autoplay videos to be muted, otherwise autoplay is blocked.

muted

Silences the video.

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

loop

Repeats the video automatically.

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

poster

Displays an image before the video loads or before playback starts.

<video src="movie.mp4" controls poster="thumbnail.jpg"></video>

A poster image gives the player a cleaner and more inviting appearance.

Using controlsList

This attribute lets you disable certain buttons. For example, to remove the download option:

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

Other options include nofullscreen and noplaybackrate.

Preload behavior

The preload attribute tells the browser whether to download video data before the user plays it.

Options include:

  • none – Browser does not load video data

  • metadata – Loads only basic information

  • auto – Loads the entire video if possible

Example:

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

Choosing the right preload setting helps manage bandwidth usage.

Styling video elements with CSS

You can style videos to match your layout. The video player behaves like any block element, so margins, borders, shadows and rounded corners work normally.

Here’s an example:

<video 
  src="movie.mp4" 
  width="600" 
  controls
  style="border-radius:10px; box-shadow:0 0 12px #ccc;">
</video>

You can even set max-width to make the video responsive:

video {
    max-width: 100%;
    height: auto;
}

This is especially useful when designing layouts for mobile screens.

Embedding local vs external videos

There are two ways to add videos:

1. Local video files

Stored inside your project folder:

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

2. External video URLs

If the server allows direct linking:

<video src="https://example.com/media/travel.mp4" controls></video>

Some servers block external playback to prevent embedding, so you may need permissions.

Adding subtitles using <track>

Subtitles improve accessibility and help viewers understand content in noisy environments. Use the <track> tag to add captions.

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

The .vtt format is used for subtitle files. You can add multiple tracks for different languages.

Handling autoplay restrictions

Modern browsers restrict autoplay because it can be disturbing for users. To enable autoplay, the video must usually be muted:

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

If you want sound, the user must interact with the page first.

Using JavaScript with HTML video

You can control video playback using JavaScript methods like play(), pause(), load() and others.

Example:

<script>
function startVideo() {
    document.getElementById("clip").play();
}
</script>

<video id="clip" src="movie.mp4" width="500"></video>
<button onclick="startVideo()">Play</button>

This allows you to create custom buttons or advanced media controls.

When to use HTML video vs YouTube embed

HTML video is ideal when:

  • You control the video files

  • You want custom styling

  • You need offline support

  • Your site has no bandwidth limitations

YouTube embed is better when:

  • You want to save storage and bandwidth

  • You need automatic compression

  • You want built-in recommendations and analytics

  • You want easy sharing

Both methods have their own purpose, and you will learn YouTube embedding in a later chapter.

Summary of HTML Video

The <video> element helps you embed video content directly inside your webpage without plugins. You learned how to set the video source, use multiple formats, enable playback controls, add posters, autoplay, looping and preload behavior. You also saw how to add captions with the <track> tag, control playback with JavaScript and apply custom styles. HTML video is flexible, simple and suitable for most modern websites, especially when you want full control over the media and user experience.

Practice Questions

Q1. Embed a video file named intro.mp4 using the <video> tag.

Q2. Add controls to let users play and pause the video.

Q3. Make the video autoplay, muted, and loop.

Q4. Add a poster image called thumbnail.jpg.

Q5. Provide fallback text for browsers that don’t support video.

Q6. Embed a .webm and .mp4 version of the same video.

Q7. Set video dimensions to 640x360 pixels.

Q8. Use CSS to round the corners of the video player.

Q9. Create a responsive video using max-width: 100%.

Q10. Embed multiple videos on one page with different posters.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top