**`autoplay`** is a boolean attribute that tells the browser to start playback as soon as enough data has loaded, with no click required from the user. Almost every modern browser (Chrome, Firefox, Safari) enforces a policy that **blocks autoplay with sound** entirely — the media simply won't autoplay unless it's also `muted`. This restriction exists specifically to stop unwanted, disruptive audio from playing the instant a page loads.
1Understanding autoplay
`autoplay` is a boolean attribute that tells the browser to start playback as soon as enough data has loaded, with no click required from the user. Almost every modern browser (Chrome, Firefox, Safari) enforces a policy that blocks autoplay with sound entirely — the media simply won't autoplay unless it's also muted. This restriction exists specifically to stop unwanted, disruptive audio from playing the instant a page loads.
Don't rely on autoplay firing reliably even when muted — some browsers still block it under certain conditions (e.g. low battery mode, or if the user has a site-level autoplay-block setting), so always provide visible controls as a fallback.
<video autoplay muted loop playsinline>
<source src="/hero-background.mp4" type="video/mp4">
</video>2Practical Example
Here is a real-world application of autoplay showing how it is used in production HTML.
<!-- Unmuted autoplay: silently ignored by the browser -->
<audio autoplay>
<source src="/welcome.mp3" type="audio/mpeg">
</audio>3Best Practices
Follow these guidelines when working with autoplay:
1. Always pair autoplay with muted — unmuted autoplay is blocked by virtually every modern browser
2. Add playsinline as well for autoplaying video to work correctly on mobile Safari
3. Provide visible controls as a fallback in case autoplay is blocked in a given browser/context
Tip: Don't rely on autoplay firing reliably even when muted — some browsers still block it under certain conditions (e.g. low battery mode, or if the user has a site-level autoplay-block setting), so always provide visible controls as a fallback.
<video autoplay muted loop playsinline>
<source src="/hero-background.mp4" type="video/mp4">
</video>