
# Video Not Autoplaying in React or Next.js? Use autoPlay, Not autoplay

**Short answer:** in JSX the attribute is `autoPlay` with a capital P. If you copy plain HTML and write `autoplay`, React doesn't recognise it, drops it, and your video loads but just sits on the first frame. Write it like this:

```jsx
<video autoPlay muted loop playsInline>
  <source src="/videos/clip.mp4" type="video/mp4" />
</video>
```

`muted` and `playsInline` aren't optional extras. Browsers block autoplay with sound, and iPhones won't play a video inline without `playsinline`.

## What happened

I made a short clip with [Sora](https://sora.com/) and tried to use it in a Next.js page. The video loaded, but it never started playing. This is the code I had (with a public Wikimedia test clip instead of my Sora video):

```jsx
export default function Page() {
    return (
        <div>
            <h1>Video</h1>
            <video autoplay muted loop>
                {/* This is not the video I created with Sora */}
                <source src="https://upload.wikimedia.org/wikipedia/commons/0/09/Frozen_drop.webm" type="video/webm" />
                Your browser does not support the video tag.
            </video>
        </div>
    );
}
```

It looks right because it's valid HTML. In React it isn't, and the fix was changing `autoplay` to `autoPlay`.

## Why lowercase autoplay is ignored

React uses camelCase names for DOM attributes: `className`, `tabIndex`, `autoPlay`, `playsInline`. A lowercase `autoplay` is treated as an unknown attribute. Writing it with no value means `autoplay={true}`, and React won't put a boolean `true` on an attribute it doesn't know. So it's left out of the HTML.

You can see this in the browser console in development:

```
Invalid DOM property `autoplay`. Did you mean `autoPlay`?
```

Here is what React 19 actually renders for each spelling. It is the same from server rendering and in the browser:

<Table data={{
  "headers": ["What you write in JSX", "Rendered video tag", "Autoplays?"],
  "rows": [
    ["autoplay", "no autoplay attribute (plus a console warning)", "No"],
    ["autoPlay", "autoplay=\"\"", "Yes"],
    ["autoPlay=\"true\"", "autoplay=\"\" (plus a console warning)", "Yes"],
    ["autoPlay=\"false\"", "autoplay=\"\" (plus a console warning)", "Yes, which is probably not what you meant"],
    ["autoPlay=\"\"", "no autoplay attribute", "No"]
  ]
}} />

*An earlier version of this post suggested `autoPlay="true"`, `autoPlay="autoplay"` or `autoPlay=""`. The first two work but trigger a warning, and `autoPlay=""` doesn't work at all because React treats an empty string as false. Just write `autoPlay` on its own, or `autoPlay={true}`.*

The same applies to the other video attributes. Use `playsInline`, not `playsinline`. `muted`, `loop`, `controls` and `poster` are already single words, so they're fine as they are.

## The fixed component

```jsx
export default function Page() {
    return (
        <div>
            <h1>Video</h1>
            <video autoPlay muted loop playsInline>
                <source src="https://upload.wikimedia.org/wikipedia/commons/0/09/Frozen_drop.webm" type="video/webm" />
                Your browser does not support the video tag.
            </video>
        </div>
    );
}
```

This works as a Server Component in the Next.js App Router. It doesn't need `"use client"` because there's no state or effect.

## If it still won't autoplay

Getting the attribute name right is the usual cause. If the video still sits there, check these:

1. **Is it muted?** Chrome, Safari and Firefox all block autoplay with sound unless the user has already interacted with the site. `muted` is the reliable way through. If you need sound, start muted and add an unmute button.
2. **Is `playsInline` there?** On iPhone, a video without `playsinline` won't play inline on the page. Add `playsInline` for any background or hero video.
3. **Can the browser play the format?** `.webm` isn't supported everywhere, particularly on older Apple devices. H.264 MP4 is the safe default. You can list both and the browser picks the first one it supports:

   ```jsx
   <video autoPlay muted loop playsInline>
       <source src="/videos/clip.webm" type="video/webm" />
       <source src="/videos/clip.mp4" type="video/mp4" />
   </video>
   ```

   If you need to convert or shrink a clip, my [FFmpeg on Ubuntu commands](/blog/2025/02-24-handy-linux-ubuntu-commands-for-video-processing/) post has the commands.
4. **Is the device in a power-saving mode?** Some phones in low power or data-saver modes don't autoplay video at all. Your code can't override that, so set a `poster` image so the page still looks right.
5. **Is the file path right?** In Next.js, files in `public/` are served from the site root. `public/videos/clip.mp4` is `/videos/clip.mp4`, not `/public/videos/clip.mp4`. Check the Network tab for a 404.

## Fallback: start it with play() and catch the error

If you want to know when autoplay was blocked, or you swap the `src` after the first render, start the video from an effect. `play()` returns a promise that rejects (usually with `NotAllowedError`) when the browser refuses. In the App Router this has to be a Client Component:

```jsx
"use client";

import { useEffect, useRef } from "react";

export default function BackgroundVideo({ src, poster }) {
    const ref = useRef(null);

    useEffect(() => {
        const video = ref.current;
        if (!video) return;
        video.muted = true; // set the property as well, before calling play()
        video.play().catch((err) => {
            // Autoplay was blocked. The poster stays visible.
            console.warn("Autoplay blocked:", err.name);
        });
    }, [src]);

    return (
        <video ref={ref} src={src} poster={poster} autoPlay muted loop playsInline />
    );
}
```

Setting `video.muted = true` in code is belt and braces. React sets `muted` as a DOM property rather than an attribute when it renders in the browser, so you won't see `muted` when you inspect the element even though the video is muted.

## The video

Here's the Sora clip that started all this:

<YouTube id="q8b7NDJgDlo" title="Futuristic Cyberpunk Drive - An AI Generated Video by Sora"/>

If you're comparing AI video tools, see [Exploring AI video generation](/blog/2025/02-20-exploring-ai-video-generation/).

<ContactFooter />


db192de442d89443f3b3ab6b4be40658516e582202c2ccf7209459c08e663f7c

React video not autoplaying? JSX needs autoPlay (capital P); lowercase autoplay is dropped. Plus muted, playsInline and a play() fallback for Next.js.

Why a muted, looping video won't autoplay in React or Next.js when you write the HTML attribute autoplay, and the fix: autoPlay with a capital P, plus muted and playsInline for browser autoplay rules.

Tag: Video

Tag: Video

Video Not Autoplaying in React or Next.js? Use autoPlay, Not autoplay