[Custom slides] Iframe / youtube - how to handle sliding

[MrNovado]

Having very basic slide akin to one in this discussion:
#16
https://codesandbox.io/s/yet-another-react-lightbox-16-bwx8nc

<iframe
  src={src}
  title={title}
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

1. Is there a way you could still have sliding work the same it works for images?
   -- iframe obviously consumes pointer events, but maybe there's some other way?
   -- like rendering something else (a placeholder) before rendering the entire frame?
   -- or maybe one could juggle enabling / disabling pointer events somehow?
   -- like what's the common solution to this nowadays besides not having frames inside a slider?

2. [Bug?] Is there a way to fix sliding event getting stuck when pointer goes over an iframe?
   -- you could reproduce this behavior in the sandbox above (but you have to open the preview in a new window!);
   -- start pointer sliding (desktop-view!) the slide with an iframe by dragging just a little to the left/right of the iframe
   -- keeping the lmb down, drag the cursor over the iframe
   -- now release the lmb and drag the cursor all over -- the slide will continue following (drag event is not cancelled)
   -- if you manage to drag the cursor over the black part of the slide again and click -- the drag is cancelled but the slide position is stuck at where it was

[igordanchenko]

1. I haven't experimented a lot with iframe slides in a lightbox, but based on my experience, you should not expect navigation features to work exactly the same way they work for regular images. Even keyboard navigation stops working when an iframe captures focus. So that leaves the navigation buttons pretty much the only reliable navigation option within a slide using an iframe. To improve the UX, you can probably leave some extra space around an iframe so that users can either swipe or click-and-drag to go to the next slide as an alternative to clicking the Prev/Next buttons.

2. Yes, it looks like a bug. I'll take a look sometime later this week.

[MrNovado]

Yes, it looks like a bug. I'll take a look sometime later this week.

Nice to hear :) Made a ticket for you so it's easier to remember the issue exists #48

[aalampalli]

Youtube video is not pausing when changing the slide. How to control when change the slide.

[igordanchenko]

I'm assuming you can call pauseVideo from the on={{ view: ({ index }) => ... }} callback

https://developers.google.com/youtube/iframe_api_reference

[aalampalli]

Thanks for reply, Tried but, Not able to do it, due to not getting player object

[igordanchenko]

Well, why don't you open a separate discussion since it's not directly related to the OP's original question, and provide a complete example showing what you've tried that didn't work.