Autoplay Video

To autoplay a video in HTML, use the autoplay attribute on the video element. In most modern browsers, the video must also have the muted attribute for the autoplay to work.

Autplaying a video can be a great way to grab a user's attention, such as with a silent background video. However, it can also be annoying if it starts playing loud sound as soon as the page loads, so browsers have implemented strict rules about how it works.

The Basic Syntax

Here is the most common way to autoplay a video. Note that we also include muted and playsinline (the latter is often required for mobile devices):

Why the `muted` attribute is required

Modern browsers (like Chrome, Safari, and Firefox) generally block any video from autoplaying with sound. This is to prevent a poor user experience. To ensure your video autoplays consistently, you should always include the muted attribute.

Interactive Example

Below is a working example of an autoplaying video. Since it is muted, it should start playing immediately when the preview loads:

View Output

When NOT to Autoplay

While autoplaying a silent background video is common, you should avoid autoplaying informative or content-heavy videos with sound for these reasons:

Accessibility: Screen reader users may be confused or have their screen reader's audio drowned out by the video's sound.
User Preference: Many users find autoplaying audio intrusive and may leave your site immediately.
Data Usage: Autopolaying videos can consume significant bandwidth, which can be expensive for users on limited mobile data plans.

Autoplaying YouTube Videos