HTML loop Attribute

The HTML loop attribute makes an audio or video resource automatically start playing again from the beginning each time it reaches the end.

Elements That Use the loop Attribute

The loop attribute can be used with the <audio> and <video> elements.

Element	Description
`<audio>`	Causes the audio to start again automatically when it reaches the end.
`<video>`	Causes the video to start again automatically when it reaches the end.

Boolean Attribute

The loop attribute is a Boolean attribute. Its presence enables looping, and its absence disables looping.

<video controls loop>
  ...
</video>

A Boolean attribute does not use the values true and false in the usual way. For example, loop="false" still enables looping because the attribute is present.

<!-- Looping enabled -->
<video loop></video>

<!-- Looping is also enabled -->
<video loop="false"></video>

<!-- Looping disabled -->
<video></video>

Using loop with Audio

When loop is present on an <audio> element, playback automatically returns to the beginning after the audio reaches the end.

<audio controls loop>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

The user can still pause, seek, or stop playback using the available media controls. The loop attribute only controls what happens when playback reaches the end.

Using loop with Video

The same behavior applies to the <video> element. When the video finishes, playback automatically returns to the beginning and continues.

<video controls loop width="600">
  <source src="video.mp4" type="video/mp4">
</video>

Looping can be useful for short demonstrations, animations, decorative videos, or other media intended to repeat continuously.

loop and autoplay

The loop and autoplay attributes control different aspects of media playback. The loop attribute determines whether media starts again after reaching the end, while autoplay requests that playback begin automatically.

<video autoplay muted loop playsinline>
  <source src="video.mp4" type="video/mp4">
</video>

Browsers commonly restrict autoplay when media contains audible sound. Muted media is more likely to be permitted to autoplay, but loop itself does not require autoplay.

Accessibility

Continuously repeating audio or video can be distracting or difficult for some users. When looping media is more than brief decorative content, provide controls that allow users to pause or stop playback.

Avoid using continuously looping media when it interferes with reading, navigation, or other page content. Audio that repeats automatically can be especially disruptive.

Common Mistakes

Do not use loop="false" to disable looping. Because loop is a Boolean attribute, its presence enables the feature regardless of the text assigned to it. Remove the attribute when looping is not wanted.

Do not confuse loop with autoplay. The loop attribute does not make media begin playing automatically; it only causes playback to restart after reaching the end.

Do not use continuous looping without considering whether users need a way to pause or stop the media.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The loop attribute is widely supported on both <audio> and <video> elements in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the loop Attribute

The example uses the loop attribute on a video. Start the video and allow it to reach the end to see it automatically begin again.

Play in Editor

Summary

The HTML loop attribute is a Boolean attribute used with the <audio> and <video> elements. When present, it causes the media to automatically start again from the beginning whenever playback reaches the end.