HtmlHow-ToBeginner · 3 min read

How to Loop Video in HTML: Simple Guide with Examples

To loop a video in HTML, add the loop attribute inside the <video> tag. This makes the video restart automatically when it ends without extra code.

📐

Syntax

The <video> tag supports the loop attribute to make the video play repeatedly. You place loop inside the opening <video> tag without a value.

src: The video file URL.
controls: Shows play/pause buttons.
loop: Makes the video restart automatically after finishing.

html

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

Output

A video player with controls that plays the video repeatedly in a loop.

💻

Example

This example shows a video that plays with controls and loops automatically when it ends.

html

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

Output

A 320x240 video player with controls that automatically restarts the video when it ends.

⚠️

Common Pitfalls

Some common mistakes when looping videos in HTML include:

Forgetting to add the loop attribute, so the video stops after playing once.
Using loop="true" or loop="false" which is incorrect; loop is a boolean attribute and should be written without a value.
Not including controls which can confuse users if the video loops silently.

html

<!-- Wrong way -->
<video src="video.mp4" controls loop="true"></video>

<!-- Right way -->
<video src="video.mp4" controls loop></video>

📊

Quick Reference

Remember these tips for looping videos in HTML:

Use loop without a value inside the <video> tag.
Include controls for user-friendly playback.
Provide fallback text inside the <video> tag for unsupported browsers.

✅

Key Takeaways

Add the loop attribute inside the

Write loop as a boolean attribute without any value, like

Include controls so users can pause or play the video easily.

Provide fallback text inside the video tag for browsers that do not support video.

Avoid using loop="true" or loop="false" as it is not valid HTML.