Struggling with broken autoplay in React? This guide unpacks the bug, provides a robust component fix, and demonstrates how to optimize your assets for faster loading.

What we'll cover:

  1. Why browsers block autoplay and the specific React bug that breaks Safari
  2. A production-ready AutoplayVideo component with the Safari fix
  3. How to reduce video file size by up to 98% using ImageKit
  4. Real-world patterns: hero backgrounds and scroll-triggered playback

We have a working repository for Next.js Video Autoplay here. All the code samples in this article are from the same repository.

Understanding why autoplay fails

Modern browsers enforce strict autoplay policies. The rule is simple, videos must be muted to autoplay.

Condition Chrome Safari iOS Safari
Unmuted video Blocked Blocked Blocked
Muted video Works Bug Works
Muted + playsInline Works Bug Works

However, you'll notice Safari shows "Bug" even for muted videos. How does that happen?

The React muted attribute bug

When you write muted={true} in JSX, React sets the JavaScript property: video.muted = true.

Chrome allows this.

Safari doesn't. It requires the HTML attribute <video muted> to actually exist in the DOM markup.

Because React doesn't always reflect the property to the attribute during hydration, Safari sees a video without the muted attribute and blocks it. This has been a known issue since 2017.

Address this issue by using a ref and useEffect to manually set the attribute:

video.setAttribute('muted', '');
video.muted = true;

This forces both the attribute and property, satisfying all browsers.

Step 1: Configure AutoplayVideo Component