Streaming live at 10am (PST)

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: [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: Webflow - Pro DT