search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.8k stars 175 forks source link

when the slide is a video instead of an image, slide up and down doesn't work #297

Closed xnslx closed 2 years ago

xnslx commented 2 years ago

Hey David,

I think I see a bug. This is the codesandbox, as you can see when the slide is a video instead of an image, moving the mouse to make the slide up and down doesn't work, unless using the dots to programmatically change the slide.

davidjerleke commented 2 years ago

Hi @xnslx,

Thank you for your question. This is expected and not a bug. An iframe is a separate HTML document and it will swallow/hijack any pointer events (meaning mouse and touch events). These events wont be triggered on the carousel elements when the iframe is there. The only solution I know of is to create an overlay on the iframe, with a play icon inside. When the user clicks on it, you can remove the overlay and load the iframe. Note that this solution will only work until the user starts the video. I don't know if there's a way to listen to when a Vimeo iframe stops. If there is, you could add the overlay back on top of the iframe when the user stops the video.

Best, David

xnslx commented 2 years ago

Hey David, @davidjerleke

Thank you so much for taking the time to explain this question to me. I really appreciate your time and patience. Right now I am trying to use focus-trap-react to fix it, having a hard time wrapping my head around this question. Anyway, thank you so much. Really appreciate your help!

xnslx commented 2 years ago

Hey David @davidjerleke just let you know, plyr package works seamlessly with embla carousel and easily solve the problem that iframe focus cannot be trapped. Have a wonderful day!

Xian

codesandbox

davidjerleke commented 2 years ago

Hello Xian (@xnslx), Thanks for sharing your solution. It might help others looking to achieve the same thing in the future 🙂.

It seems like the plyr package makes use of an HTML player in most cases. An HTML player is part of the same HTML document so it won't swallow pointer events like an iframe does. That's why it's working as expected. But if you use iframes to embed videos inside a draggable carousel, the problem you initially described will still be present because of the reason I explained here.

Best, David