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:
- Stop Vimeo / YouTube video after closing modal - #25 by Adam_Karlsson
- Stop Vimeo video with another button - #16 by edwwward
VideoJS - allowing only one video to play at a time
But I’m still stuck.
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:
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
Here is my site Read-Only: Webflow - Pro DT