HTML Loop

HTML loop allows audio and video files to repeat automatically after playback finishes. It is useful for background videos, music players, promotional clips, and other multimedia content that needs continuous playback.

HTML provides the loop attribute for both the <audio> and <video> elements. You can enable repeating media by adding this attribute directly to the HTML element.

What Is the HTML Loop Attribute?

The loop attribute tells the browser to restart an audio or video file automatically when it reaches the end.

For example, you can make a video repeat using the following code:

<video controls loop width="500">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

In this example, controls displays the playback controls, while loop makes the video repeat after it finishes.

Learn more about multimedia elements in our HTML Media tutorial.

Using Loop with HTML Audio

You can use the loop attribute with the <audio> element to repeat music, podcasts, or other sound files.

<audio controls loop>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

When the audio reaches the end, the browser starts playing it again automatically. The controls attribute allows visitors to pause playback or stop it by using the player controls.

This feature can be useful for music players and audio experiences where repeated playback is appropriate.

Using Loop with HTML Video

The loop attribute also works with videos. It is commonly used for short demonstrations, animated backgrounds, and product previews.

<video controls loop width="600">
  <source src="demo.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

The video plays normally and restarts automatically when it reaches the end.

You can combine loop with other attributes, such as muted and autoplay.

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

This example requests automatic, muted, continuous playback. Browser autoplay policies still apply.

HTML Loop with Other Attributes

The loop attribute can be combined with several other multimedia attributes.

Attribute	Purpose
loop	Repeats media automatically
controls	Displays playback controls
autoplay	Requests automatic playback
muted	Starts media without sound
poster	Displays a preview image for a video

For example, you can combine loop, controls, and poster to create a video player with a preview image.

<video controls loop poster="preview.jpg" width="500">
  <source src="lesson.mp4" type="video/mp4">
</video>

The preview image appears before playback begins, and the video repeats after reaching the end.

Does the Loop Attribute Work Without JavaScript?

Yes. The loop attribute works directly in HTML, so you do not need JavaScript to repeat audio or video files.

However, JavaScript can provide more advanced playback behavior, such as repeating a specific section of a video or changing playback settings dynamically.

Best Practices for HTML Loop

Follow these practices when using the loop attribute:

• Use looping for short, relevant media.
• Avoid distracting visitors with unnecessary continuous animation or sound.
• Consider battery usage and performance on mobile devices.
• Provide playback controls when users need to pause or stop media.
• Use muted when appropriate for decorative background videos.
• Test media playback in different browsers.

Explore our related tutorials on HTML Video, HTML Audio, and HTML Autoplay to learn more about controlling multimedia playback.