I am using youtube frame to get vedeo from youtube, and add it in slider component. But when I click on vedeo to start slider interval continue to slide, but I want to stop it when users click on vedeo.

import React from "react";
import "../styles/Slider.css";

const Slider = () => {
  return (
    <div
      id="carouselExampleInterval"
      className="carousel slide crs"
      data-bs-ride="carousel"
    >
      <div className="carousel-inner">
        <div className="carousel-item active" data-bs-interval={2000}>
          <iframe
            src="https://www.youtube.com/embed/Kj6EpqJ8HqM"
            title="thebandwala serivce"
            allowFullScreen="allowfullscreen"
          />
        </div>
        <div className="carousel-item" data-bs-interval={3000}>
          <iframe
            title="thebandwala serivce"
            src="https://www.youtube.com/embed/z6vrN4iHpPE?si=ocEXabl5sIWPFw9Y"
            allowFullScreen="allowfullscreen"
          ></iframe>
        </div>
        <div className="carousel-item">
          <iframe
            src="https://www.youtube.com/embed/enj9dijy07I?si=5_qkhcuwDWJlvnWD"
            allowFullScreen="allowfullscreen"
          ></iframe>
        </div>
      </div>
      <button
        className="carousel-control-prev "
        type="button"
        data-bs-target="#carouselExampleInterval"
        data-bs-slide="prev"
      >
        <span className="carousel-control-prev-icon pp12" aria-hidden="true" />
        <span className="visually-hidden">Previous</span>
      </button>
      <button
        className="carousel-control-next "
        type="button"
        data-bs-target="#carouselExampleInterval"
        data-bs-slide="next"
      >
        <span className="carousel-control-next-icon pp12" aria-hidden="true" />
        <span className="visually-hidden">Next</span>
      </button>
    </div>
  );
};

export default Slider;

I am unaware about how to stop slider interval when clicked on vedeo.