<img loop=""> Attribute: Make Videos Loop In Your HTML

Attribute of

HTML Tags Guide To Adding Images To Your Web Documents

What does <img loop=""> Attribute: Make Videos Loop In Your HTML do?

Previously used to specify the number of times a video should play, when used in conjunction with the dynsource attribute. Both attributes have been deprecated.

Code Example

<!-- DEPRECATED. This code will probably not work on your browser. -->

<img src="/wp-content/uploads/flamingo.jpg" dynsrc="/wp-content/uploads/flamingo-movie.mp4" loop="-1">

dynsrc and loop

Before the advent of HTML Media, there were several different attempted methods for embedding videos into a web page. One notable example was the dynsrc attribute (dynamic source), which overloaded an <img> tag with a video file. (You can read more about it on our page about the dynsrc attribute).

During the period when the dynsrc was in use, internet connections were slow and bandwidth was expensive, so most video presented with this method were very short and often did not contain audio (the largest part of many video files). It was common, then, to simply let the movie loop one or more times (or indefinitely). The loop attribute, when used in conjunction with the dynsrc attribute, specified the number of times to loop the video. You could set it on infinite repeat by setting the attribute to -1.

None of this works anymore.

HTML5 Video and Looping

HTML5 provides a <video> element, which makes it very easy to embed an movie. You can even include an image as “fallback” content, which mirrors the original functionality of the dynsrc attribute.

The <video> tag also has a loop attribute, but does not accept any values. If present, the video simply plays continuously until it is stopped by the user.

(If you want to be really annoying you can include the autoplay attribute, and not include the controls attribute. Then the user won’t be able to stop the video. You probably shouldn’t do this.)

<video loop controls>
 <!-- Specify one or more source files. The browser will select the best one. -->
 <source src="/wp-content/uploads/flamingo-movie.mp4">

 <!-- Fallback content. Anything outside of a source element will be displayed if the browser can't play the video. -->
  <img src="/wp-content/uploads/flamingo.jpg" alt="flamingo">
</video>

#loop-video {
padding: 0;
}
#loop-video video {
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#loop-video video img {
margin: 24px;
}

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.