So I’m adding this video popup modal to a new site I’m working on, and, for some reason, my video in the popup RESTARTS or KEEPS PLAYING after I click the CLOSE MODAL button. I really want to use this clone because it’s simple, but I need some sort of code snippet or tweak to make sure our videos stop and/or don’t restart once they’re closed.
I’m adding the videos (hosted on Bunny.net) via an embed field connect to CMS.
Starbucks on me if you can take a peek and help me solve this. Thank you!
Try removing the autoplay attribute. I noticed in your staging link that if you skip to the middle of the video and close it, it stops for a second and then it’s restarting from the beginning.
Well, that might come in handy as a last resort, but autoplay is a part of the user experience we want to have in this case. I appreciate the suggestion!
The basic process is to detect the interaction-based modal closing with a mutationobserver, and then tell the player to pause.
In this case it looks like Bunny is using Plyr, so you’d have to adapt my code example here for that player. I’ve used Plyr in some client sites so this should definitely be possible.
I definitely think the above is probably a bit beyond my knowledge (I’m not a developer/programmer). I tried replacing what I thought needed to be replace, and it doesn’t seem to be working.
I really hope I can keep the autoplay feature and have it stop, but I might end up having to turn autoplay off.
Gonna keep looking for the answer while I continue to build.
Removing autoplay won’t cause the video to stop when the modal is closed, so it’s likely you’ll still have the problem you’re facing.
Drop me a message if you need help building this, I built a very similar capability recently for a client, which also used Plyr as the underlying video player.
