HTML loop Attribute

Introduction

The loop attribute is used on <audio> and <video> elements to make media restart automatically when it reaches the end. By default, audio and video play once and stop. With loop, playback repeats indefinitely until the user pauses it or JavaScript changes the setting. This is ideal for background clips, ambient sound loops, and short animations—not for programming loops in JavaScript.

What You’ll Learn

Purpose of loop

The primary purpose of the loop attribute is to specify whether a media element should automatically restart once playback finishes. Without loop, the media stops at the last frame or sample. With loop, the browser seeks back to the start and plays again seamlessly.

Common uses include looping background videos on landing pages, repeating short UI sound effects, and ambient audio tracks. Always pair looping media with user controls or a clear way to stop playback.

📝 Syntax

<video width="320" height="240" controls loop>
  <source src="clip.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio src="ambient.mp3" controls loop></audio>

Syntax Rules

• Valid on <video> and <audio> elements only.
• Boolean attribute—write loop or loop=""; presence enables repeating playback.
• Default when omitted: play once (loop is false).
• Prefer bare loop over loop="true" (both work, but bare form is idiomatic HTML).
• Combine with controls so users can pause looping media.
• JavaScript property: mediaElement.loop = true on HTMLMediaElement.

💎 Values

The loop attribute is a boolean attribute:

• loop present — Media repeats indefinitely after reaching the end (true).
• Attribute absent — Media plays once and stops (false, default).
• loop="" or loop="loop" — XHTML-style boolean; same as bare loop.

document.getElementById("myVideo").loop = true;
document.querySelector("audio").loop = false;

Applicable Elements

loop vs autoplay

Examples Gallery

Looping video, looping audio, and toggling loop with JavaScript.

<video width="320" height="240" controls loop>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio src="ambient.mp3" controls loop></audio>

<video id="dynamicVideo" controls src="clip.mp4"></video>

<script>
  document.getElementById("dynamicVideo").loop = true;
</script>

♿ Accessibility

• Provide controls — Let users pause or mute looping media, especially autoplay clips.
• Avoid unexpected sound — Looping audio that starts automatically can disorient screen reader users.
• Respect reduced motion — Consider disabling loop/autoplay when prefers-reduced-motion: reduce is set.
• Do not rely on loop for essential info — Content should be available without watching a repeating animation.
• Keep background loops subtle — Low contrast, muted video loops are less distracting.

💡 Best Practices