Closed xnslx closed 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
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!
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
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
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.