Youtube video is not pausing when change the slide

[aalampalli]

I have tried with below code.

const pauseVieo = () => {
player.pauseVideo()
};

<Lightbox
close={closeSlideShow}
open={open}
slides={images}
index={currentImageIndex}
plugins={[Zoom, Video, Thumbnails]}
animation={{ zoom: 500 }}
on={{ view: ({ index }) => pauseVieo }}
zoom={{
maxZoomPixelRatio: 8,
}}
video={{
controls: true,
}}
render={{
slide: ({ slide, rect }) =>
isYouTubeSlide(slide) ? (
<iframe width="60%" height="80%" src={slide?.src} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen aria-atomic />
) : undefined,
thumbnail: ({ slide, ...rest }) =>
isYouTubeSlide(slide) ? (
<ImageSlide slide={{ src: slide?.thumbnail }} {...rest} />
) : undefined,
}}
className="cool-class"
/>

In the above method not able get what is player object. Even if i get it after reading from documentation, how it will connect this youtube video.

[igordanchenko]

I do not see you even trying to obtain the player object. Calling a method of an undefined object is not going to magically work.

Here is how you can solve this problem:

1. Load YouTube Iframe API in advance (either on a page load or add it as a global script in your app)
2. Implement YouTube slide as a functional component instead of an inline render function. Create YouTube player object by passing it an iframe ref. Create an effect that runs when offset !== 0 and pause video if it's playing.

Alternatively, you can use a 3rd-party library like react-youtube as you may find it easier to use.

p.s. Please consider formatting your code in the future, as good manners can go a long way.