HtmlHow-ToBeginner · 3 min read

How to Add Controls to Video in HTML Easily

To add playback controls to a video in HTML, use the controls attribute inside the <video> tag. This attribute automatically shows play, pause, volume, and other controls in the browser's video player.

📐

Syntax

The <video> tag supports the controls attribute to display built-in video controls. It is a boolean attribute, meaning you just add it without a value.

<video>: The HTML element to embed video.
controls: Adds play, pause, volume, and other controls.
src: Specifies the video file URL.
width and height: Optional attributes to set video size.

html

<video src="video.mp4" controls width="640" height="360"></video>

Output

A video player with play, pause, volume, and fullscreen controls visible.

💻

Example

This example shows a simple video with controls enabled. The user can play, pause, adjust volume, and toggle fullscreen using the browser's default controls.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video with Controls</title>
</head>
<body>
  <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" controls width="480" height="270">
    Sorry, your browser does not support the video tag.
  </video>
</body>
</html>

Output

A 480x270 video player with visible controls for play, pause, volume, and fullscreen.

⚠️

Common Pitfalls

Common mistakes when adding controls to video include:

Forgetting to add the controls attribute, so no controls appear.
Using controls="false" which still shows controls because controls is boolean.
Not providing a valid src or fallback content, causing the video not to load.

Correct usage is just adding controls without a value.

html

<!-- Wrong: controls attribute with false value still shows controls -->
<video src="video.mp4" controls="false"></video>

<!-- Right: controls attribute without value -->
<video src="video.mp4" controls></video>

Output

The first video still shows controls; the second video correctly shows controls as intended.

📊

Quick Reference

Attribute	Description	Example
controls	Shows built-in video controls
src	URL of the video file
width	Width of the video player
height	Height of the video player

✅

Key Takeaways

Add the boolean attribute controls inside the <video> tag to show playback controls.

Do not assign a value to controls; just include it to enable controls.

Always provide a valid src for the video to load properly.

Include fallback text inside <video> for browsers that do not support video.

Use width and height attributes to control the video player size.