Tabs: play/pause video (custom embed) when changing tab

Hi Webflow Community!

I’ve been struggling with some Webflow Tabs + Custom HTLM video embed.
(Here on this page: https://pro-dancetelevision.webflow.io/draft-dtv-live-channels)

My goal is to create a section with multiple live stream channels that you can seamlessly scan through by switching Tabs.

I’ve managed to insert my 3 live stream videos. And keep the player responsive.
But the videos still play ‘on top of each over’ when switching tabs.

After some research and trials, I think a script that triggers ‘video.pause’ and ‘video.play’ when a tab is clicked could do the trick. Or a script that allows only a single media to play at a time.

I got inspiration from multiple entries on this forum:

I believe because my functions are not pointing to the right class/id or that I have not well defined those elements (I am new to this)

My last trials focused on allowing only a single media to play.

Giving to the videos:
id=channel01
id=channel02
id=channel03

And writing a function like:
if channel01 is playing > pause channel02 and channel03
if channel02 is playing > pause channel01 and channel03
if channel03 is playing > pause channel01 and channel02

Any solution/idea is very welcome :slight_smile:

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/pro-dancetelevision?utm_medium=preview_link&utm_source=designer&utm_content=pro-dancetelevision&preview=dca62d7d42ee63340d38b3cc2fafc977&pageId=60911dca1b2c3d32a5be3457&mode=preview

1 Like