React app issue : Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.youtube.com/watch/xxxxx with MIME type text/html

I am working on a react app with node/express on the backend. I want a component to render a video which URL is passed down from its parent component as prop.

the parent component is named : Stepper and its child is named : ChestVideoWorkouts.

The problem I face is that the video does not render to the DOM, whereas its src URL is loaded when I inspect. I have CORS installed.

I get these errors in the console :

Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.

Resolve this issue by updating the attributes of the cookie:

• Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use.

• Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests.

Here is the code of Stepper :

import { Button, message, Steps } from "antd";
import React, { useState } from "react";
import { WorkoutInfosDrawer } from "../drawer_content/WorkoutInfosDrawer";
import { InfosvgIcon, RateIcon, VideoPlayer } from "../icons/Icons";
import { RateWorkout } from "../rating/RateWorkout";
import { ChestVideoWorkouts } from "../video_components/ChestVideoWorkouts";
import "./steps_styles.scss";
const { Step } = Steps;

export const Stepper = ({ workoutTitle }) => {
  function videoUrl(url) {
    let videoUrl =
      workoutTitle === "Barbell Flat Bench Press"
        ? { url: "https://www.youtube.com/watch?v=rT7DgCr-3pg" }
        : "";
    return videoUrl.url;
  }
  const steps = [
    {
      title: "",
      content: <WorkoutInfosDrawer workoutTitle={workoutTitle} />,
    },
    {
      title: "",
      content: <ChestVideoWorkouts videoUrl={videoUrl()} />,
    },
    {
      title: "",
      content: <RateWorkout />,
    },
  ];
  const [current, setCurrent] = useState(0);
  const next = () => {
    setCurrent(current + 1);
  };
  const prev = () => {
    setCurrent(current - 1);
  };
  const onChange = (value) => {
    setCurrent(value);
  };

  return (
    <div className={"stepper-container"}>
      <Steps current={current} onChange={onChange}>
        <Step icon={<InfosvgIcon />} title={steps[0].title} />
        <Step icon={<VideoPlayer />} title={steps[1].title} />
        <Step icon={<RateIcon />} title={steps[2].title} />
      </Steps>

      <div className="steps-content">
        {steps[current].content}
        <div style={{ display: "inline-block" }}></div>
      </div>
      <div className="steps-action">
        {current < steps.length - 1 && (
          <Button type="primary" onClick={() => next()}>
            Next
          </Button>
        )}
        {current === steps.length - 1 && (
          <Button
            type="primary"
            onClick={() => message.success("Processing complete!")}
          >
            Done
          </Button>
        )}
        {current > 0 && (
          <Button
            style={{
              margin: "0 8px",
            }}
            onClick={() => prev()}
          >
            Previous
          </Button>
        )}
      </div>
    </div>
  );
};
{
  /* <Divider
style={{ height: "200px" }}
type="vertical"
dashed
/> */
}

and of ChestVideoWorkouts

import React from "react";

export const ChestVideoWorkouts = ({ videoUrl }) => {
  return (
    <div>
      <video
        style={{ border: "1px solid red" }}
        autoPlay
        loop
        muted
        src={videoUrl}
        width={`100%`}
        height={`100%`}
      ></video>
    </div>
  );
};

import { Button } from "antd";
import React, { useState } from "react";
import ReactPlayer from "react-player/youtube";
import redirect from "../../assets/img/redirect.png";
import { PlayIcon } from "../icons/Icons";
import "./video_styles.scss";

export const ChestVideoWorkouts = ({ videoUrl }) => {
  const [border, setborder] = useState("");

  function handlemouseOver() {
    setTimeout(() => {
      setborder("2px solid gray");
    }, 500);
  }
  return (
    <div className="player-wrapper">
      <div className="player-wrapper-vid">
        <ReactPlayer
          width="100%"
          height="90%"
          className="react-player"
          playIcon={<PlayIcon />}
          controls
          light
          url={videoUrl}
          style={{ border: border, padding: "2px" }}
          // onError={() => console.log("none")}
        />
      </div>
      <div className="player-wrapper-redirect">
        <Button
          onMouseOver={handlemouseOver}
          className="player-wrapper-red-btn"
        >
          <a href={videoUrl} target="_blank">
            <img src={redirect} alt="" />
          </a>
        </Button>
      </div>
    </div>
  );
};