Autoplay videos are excellent for grabbing attention, but getting them to play reliably across all browsers requires the right attributes and optimization strategy.

What we'll cover:

1. Why browsers block autoplay and the three attributes that fix it.
2. How to reduce video file size by up to 98% using ImageKit.
3. Building hero backgrounds and scroll-triggered playback controls.

You can find the complete working code in our Next.js Video Autoplay repository. All examples below are drawn directly from this project.

Understanding why autoplay fails

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

Three attributes make autoplay work everywhere:

• autoPlay : tells the browser to start playing immediately
• muted : satisfies the "no surprise audio" policy
• playsInline : prevents iOS from playing videos in fullscreen

That's all. Now that you understand how it works, let’s build it!

Step 1: Basic AutoplayVideo component

Here's a simple component that works across all modern browsers:

// components/AutoplayVideo.tsx
'use client';

interface AutoplayVideoProps {
  src: string;
  poster?: string;
  className?: string;
}

export function AutoplayVideo({
  src,
  poster,
  className = '',
}: AutoplayVideoProps) {
  return (
    <video
      src={src}
      autoPlay
      muted
      playsInline
      loop
      poster={poster}
      className={className}
    />
  );
}

This works with any video URL. But a 60MB hero video will still kill your page load.

Step 2: Optimizing video delivery with ImageKit

You could manually encode videos with ffmpeg. Resize them. Strip audio. Convert formats. Then re-encode every time you change dimensions or quality settings.