ReferenceError: window is not defined(But I used the UseEffect hook)

Question

I keep trying to embed the cloudinary video player in my Next.js project but I keep getting the error that window is not defined. I have used the useEffect hook but still it did not work.

import Head from 'next/head';
import "cloudinary-video-player/dist/cld-video-player.min.js";
import "cloudinary-video-player/dist/cld-video-player.min.css";
import { Cloudinary } from "cloudinary-core";
import { useEffect } from "react";

const Home = () => {
  const cld = new Cloudinary({ cloud_name: "amarachi-2812", secure: true});
  
  useEffect(() => {
    const videoPlayer = cld.videoPlayer("video-player", {
      muted: true,
      controls: true
    });
    videoPlayer.source("videoplayback_1_pr2hzi");
  });
  
  return (
    <div>
      <video id="video-player" />
    </div>
  );
};
export default Home;

reference error window