CODEWITHSUNDEEP
reactjsnext.js
Lucas Kroger
Lucas Kroger

Reputation: 21

Try to put video tag in Next.js Error: Hydration failed because the initial UI does not match what was rendered on the server

Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching in .

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack video div Home App Call Stack throwOnHydrationMismatch

    import Video from "../src/video.mp4"

    export default function Home() {
      return (
        <div>
        <video src={Video}/>
        </div>

Upvotes: 2

Views: 760

Answers (2)

Richard Torres
Richard Torres

Reputation: 163

Not sure if this is your case but for me it was a browser extension I had that controls video player speeds. In the Next.js docs about the React hydration error, it mentions browser extensions modifying the HTML among other potential causes along with a few potential fixes.

Upvotes: 6

Bawantha Rathnayaka
Bawantha Rathnayaka

Reputation: 170

You must use video tag with source

<div>
  <video autoPlay loop style={{ width: "500px", height: "500px" }}>
    <source src="/video.mp4" />
  </video>
</div>

Upvotes: -1

Related Questions