HtmlHow-ToBeginner · 3 min read

How to Autoplay Video in HTML: Simple Guide

To autoplay a video in HTML, add the autoplay attribute inside the <video> tag. For example, <video autoplay></video> will start playing the video automatically when the page loads.

📐

Syntax

The <video> tag supports the autoplay attribute to start playing the video automatically. You can also add muted to allow autoplay without sound, which is required by many browsers.

autoplay: Starts playing the video as soon as it is ready.
muted: Mutes the video sound; often needed for autoplay to work.
controls: Shows video controls like play/pause buttons.

html

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

Output

A video player that starts playing automatically without sound and shows controls.

💻

Example

This example shows a video that autoplays and is muted to meet browser autoplay policies. Controls are included so the user can pause or adjust volume.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Autoplay Video Example</title>
</head>
<body>
  <video autoplay muted controls width="320" height="240">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</body>
</html>

Output

A 320x240 video player that starts playing automatically without sound and shows controls.

⚠️

Common Pitfalls

Many browsers block autoplay with sound to avoid annoying users. To fix this, always add muted when using autoplay. Forgetting muted can cause the video not to play automatically.

Also, some browsers require user interaction before autoplay works, so test on different browsers.

html

<!-- Wrong: Autoplay without muted may not work -->
<video autoplay controls>
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Right: Add muted to allow autoplay -->
<video autoplay muted controls>
  <source src="video.mp4" type="video/mp4">
</video>

📊

Quick Reference

Attribute	Description
autoplay	Starts video playback automatically
muted	Mutes audio to allow autoplay in browsers
controls	Shows video controls (play, pause, volume)
loop	Repeats the video when it ends
playsinline	Allows video to play inline on mobile devices

✅

Key Takeaways

Use the autoplay attribute inside the <video> tag to start playback automatically.

Add muted to ensure autoplay works across most browsers without sound restrictions.

Include controls so users can pause or control the video playback.

Test autoplay behavior on different browsers and devices for best results.

Remember some browsers block autoplay with sound to protect user experience.