The loop attribute is a boolean attribute used with HTML media elements like <audio> and <video>. When present, it makes the media automatically restart from the beginning when it finishes playing.

loop

Step 2

The loop attribute is a boolean attribute - it doesn't need a value. Just add 'loop' to the tag. It works with <audio> and <video> elements. When the media finishes, it automatically starts over from the beginning.

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

Step 3

Common use cases: background music, ambient video, animated content. Always include 'controls' attribute so users can stop the media. Avoid autoplaying looping audio without user interaction - it's considered bad UX.

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

Step 4

In the browser, media with the loop attribute will automatically restart when it reaches the end. This creates continuous playback without user intervention.

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

Step 5

Checkpoint: Which HTML elements support the loop attribute?

<audio controls loop></audio>

Step 6

Correct! The loop attribute works with <audio> and <video> elements. It's a boolean attribute that enables automatic repetition of media playback.

<audio controls loop></audio>

Step 7

Now it's your turn. The loop attribute creates seamless media repetition. Complete the challenges below to master the loop attribute!

loop.html

1 / 7

🔁

Tutor:The loop attribute is a boolean attribute used with HTML media elements like <audio> and <video>. When present, it makes the media automatically restart from the beginning when it finishes playing.

⭐ 0 EXP

Loop Mastery

Unlock nodes by learning loop attribute and media elements.

Concept 1: The Loop Attribute

The loop attribute is a boolean attribute used with HTML media elements like <audio> and <video>. When present, it makes the media automatically restart from the beginning when it finishes playing.

System Check

Which HTML elements support the loop attribute?

<img><audio> and <video><div>All HTML elements

Community Holo-Net

Share Looping Media

Created effective looping audio or video? Share your code and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML loop Attribute

Pascual Vila

Frontend Instructor.

The loop attribute is a boolean attribute used with HTML media elements like <audio> and <video>. When this attribute is present, it specifies that the media file will automatically start over again from the beginning every time it finishes.

Boolean Attribute

The loop attribute is a boolean attribute - it doesn't need a value. Just add loop to the tag to enable looping behavior. Its mere presence on the tag enables the looping functionality.

Supported Elements

The loop attribute is primarily used on the <audio> and <video> tags. It creates seamless repetition of the media, which is useful for background music, ambient video, or animated content.

Best Practices

Always include the controls attribute when using loop so users can stop the media if they find it distracting. Avoid autoplaying looping audio without user interaction - it's considered bad UX. If you must use autoplay with loop, ensure it starts muted.

Performance Considerations

Looping media, especially video, can consume significant bandwidth and CPU resources. Use it judiciously and ensure media files are optimized for web delivery. Consider the user's data plan and device capabilities.

Loop Attribute Glossary

loop Attribute: Boolean HTML attribute used with <audio> and <video> elements. When present, makes the media automatically restart from the beginning when it finishes playing.
Boolean Attribute: An attribute that doesn't require a value. Just add the attribute name (e.g., "loop") to enable it. Its presence is enough to activate the feature.
Supported Elements: The loop attribute works with <audio> and <video> elements. It creates continuous playback by automatically restarting the media when it reaches the end.
Controls Attribute: When using loop, always include the controls attribute so users can stop the media. This improves user experience and accessibility.
Common Use Cases: Background music, ambient video, animated content, and seamless media playback. Useful for creating continuous media experiences.

📖 INDEX