Menu icon Foundation
How can I make videos pause when slide changes?

If I have a video playing and select the navigation arrow to go to the next slide, the video continues to play. How can I get this to stop?

video pausepausepause video

If I have a video playing and select the navigation arrow to go to the next slide, the video continues to play. How can I get this to stop?

Bob Sawyer over 4 years ago

IMHO, it's bad UI to place a video in a carousel, for this very reason.

If you must use a video in a carousel, and would like to stop playback, you'll need to add some jQuery to the nav arrows. A quick Google search will bring up any number of responses, but here's one that looked like it might work for you. They're using Bootstrap, but you can probably get it to work within Foundation as it doesn't appear to be framework-specific.

http://stackoverflow.com/questions/17514403/youtube-iframes-in-bootstrap-carousel-stop-video-on-slide

Cheers,
Bob

Rafi Benkual over 4 years ago

Ya, I agree with Bob on the UX of this.

You can trigger events like this: http://codepen.io/ZsharE/pen/FenKC

Here are some resources that will help:
http://css-tricks.com/play-button-youtube-and-vimeo-api/
http://www.w3.org/2010/05/video/mediaevents.html