Hey guys,

'use client'

const [isVideoLoading, setVideoLoading] = useState(true)
const handleVideoLoad = () => setVideoLoading(false);
  return (
        <section
            // className="px-12"
            style={{ height: "100vh" }}
        >
            <div style={{ width: "100%", height: "100%", position: "relative" }}>
                <div className={`z-0 ${brightnessActive}`} style={{ width: "100%", height: "100%", position: "absolute" }}>
                    <video playsInline onLoadedData={handleVideoLoad} muted autoPlay style={{ objectFit: "cover", display: "block", width: "100%", height: "100%", padding: 0, margin: 0 }} loop>
                        <source src={href} type="video/mp4" />
                        Your browser does not support the video tag.
                    </video>
                </div>

                <div className={`h-full ${blurActive}  py-12`}>
                    <div className="container mx-auto h-full z-20 relative overflow-scroll">
                        {isVideoLoading ? (
                            <div className=" h-full flex justify-center items-center">
                                <Loader size="md" />
                            </div>
                        ) : children}
                    </div>
                </div>
            </div>
        </section>
    );

This code works fine in production but from some reason in the development there are a bunch on inconsistencies and unexpected results.

The onLoadedData does not fire, at all.

I researched the issue a bit and found that maybe the video load before nextjs can even add the handler.

I then decided to create a useEffect and create a flag to mount the video on initial page render. Now it works in development : ).

But now its broken in prod : . Ive seen a lot of posts about it online and it seems its an issue that nextjs doesn't really have a stable answer for.

Any insights?