Pause or Stop video embed when switching tabs and carousel slides

Design help Custom code
1

Hi Guys,

I’m wondering if anyone can help me with the following…

Current situation:
I’m currently using a carousel which contains tabs on each slide.
Within each tab there is a video embed.

Problem:
When switching tabs or moving through the carousel the video continues to play.

Desired solution:
When the user switches the tab or clicks to another slide in the carousel the video will pause or stop.
(Pause is desired but if it’s simpler to stop the video this would be great too)

Preview url:
https://slidetabsvideo-4f114432-e4452a926b381.webflow.io/

Read only:
https://preview.webflow.com/preview/slidetabsvideo-4f114432-e4452a926b381?utm_medium=preview_link&utm_source=dashboard&utm_content=slidetabsvideo-4f114432-e4452a926b381&preview=51b84c0975c9c5784ac72d7212c72ec9&mode=preview

2

There’s only one component in Webflow that is currently handling video playback, being able to stop it: the Lightbox component.

Working with any other element and needing to handle a lot of video and their playback, you’ll need to use either Youtube or Vimeo’s API.

And it’s not only to control playback! At present time, if you’re having many video players in the page, it represents a huge load on the client side. using the video site’s APIs ensure not only that you can stop a video when exiting a view, but also that the page uses only 1 video player to play all the videos, even if it looks like there are several of them.

Using the APIs isn’t very easy, can be hard for a non coder (ie: I don’t do it)

3

Thanks for your advice!

The lightbox was a much neater solution and resolved the load times.