HTML Media Attributes: controls, autoplay, muted, and loop

Adding a picture or video is the easy part. Making it load efficiently and understandable to every visitor is the real goal.

What You Need to Know

Controls lets visitors manage playback. Loop repeats media, muted starts it without sound, and autoplay asks the browser to start automatically—but browsers may block autoplay, particularly when sound is enabled.

In this example: create a muted looping decorative background video.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<video controls muted loop width="600">
    <source src="media/demo.mp4" type="video/mp4">
    Video is unavailable.
</video>

Let’s Read the Code

<video>: The video element creates a video player and can include alternative formats.
<source>: A source points to a media file or image choice with a type or other condition.
controls: Controls asks the browser to provide its native audio or video player controls.
width: Width gives a preferred or intrinsic media width, depending on the element.

What the example shows: Controls supplies a player UI, muted starts without sound, and loop repeats playback after it ends.

What Happens in the Browser?

The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.

What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.

Your Turn

Add autoplay and observe which browsers play automatically under different sound settings.

Common Beginner Mistakes

Leaving out real media files or understandable text alternatives.
Autoplay is not guaranteed; many browsers block sound-producing autoplay.

Key Takeaways

Controls lets visitors manage playback.
<video>: The video element creates a video player and can include alternative formats.
If the resource cannot load, users still need enough text to understand what was meant to be there.