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:
- 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:
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
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