Need a solution to pause/stop a video when moving to the next slide

[whayu901]

I want to add images and videos together, but I get an error like this. How can this work properly?

this my code: `

return (
  <Carousel renderItem={customRenderItem} {...settings}>
    <YoutubeSlide
      key="youtube-1"
      url="https://www.youtube.com/embed/AVn-Yjr7kDc"
    />
    <div onClick={() => console.log("mutation")} key="gambar">
      <img
        src="https://cdn.dribbble.com/users/2146089/screenshots/12387473/media/bf9ffb522fe68ba57ebdc62bc3f16cc5.png"
        alt="hello"
      />
    </div>
    <div key="gambar">
      <img
        src="https://cdn.dribbble.com/users/427857/screenshots/12318706/media/f30f662dbf160022412812881b2afb43.jpg"
        alt="hellow"
      />
    </div>
  </Carousel>
);

};`

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Guribeiro]

I'm trying to do something like this, without Youtube API, only iframe with embed youtube videos

On renderItem i'm checking if the item type is equal to 'video' and returning an iframe with the url formatted to auto play, if it's not just returning the Item as CarouselItem.

But there's an issue about this approach, the vídeo has been rendered as the first item on carousel, and because of that, the iframe containing the video is been rendered duplicated on carousel, making the video audio to be duplicaded as well.

CarouselItem.tsx

export interface CarouselItemProps {
  id: string;
  foto: string;
  tipo: string;
  descricao: string;
}

interface Data {
  data: CarouselItemProps;
}

const CarouselItem = ({ data }: Data): JSX.Element => {
  const { foto, descricao } = data;

  return (
    <div
      style={{
        height: '100vh',
        width: '100%',
      }}
    >
      <img
        alt={descricao}
        src={foto}
        style={{
          width: '100%',
          height: '100%',
        }}
      />
    </div>
  );
};

export default CarouselItem;

Home.tsx

return (
      <Spin spinning={loading}>
        <Carousel
          showStatus
          showArrows
          infiniteLoop
          autoPlay
          interval={100000}
          showThumbs={false}
          renderItem={(item, options) => {
            const { props } = item as Item;
            const { data } = props;

            const { descricao, foto, tipo } = data;

            if (tipo === 'video') {
              const mediaUrl =
                options?.isSelected === false
                  ? foto.replace(/autoplay=1/, 'autoplay=0')
                  : foto.replace(/autoplay=0/, 'autoplay=1');

              return (
                <div
                  style={{
                    height: '100vh',
                    width: '100%',
                  }}
                >
                  <iframe
                    width="100%"
                    height="100%"
                    style={{
                      width: '100%',
                      height: '100%',
                      margin: '0 auto',
                    }}
                    src={mediaUrl}
                    title={descricao}
                    frameBorder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                  />
                </div>
              );
            }

            return item;
          }}
        >
          {news.map((item) => (
            <CarouselItem key={item.id} data={item} />
          ))}
        </Carousel>
      </Spin>
    );
  };