Hello Webflow community,
I am seeking your advice and help in solving an issue
On the Films page of my site, I have 8 Vimeo videos embedded into the page using the video component. They are all set to display none so that they are initially hidden. Upon clicking one of the 8 thumbnails on the page, an animation triggers the display:show for a given Vimeo video. There are 8 separate animations that are assigned based on class to show the corresponding video and hide all other videos present.
I would like to have the video press pause when the display value is set to none again. I read in another forum post that I need to use the Youtube or Vimeo API to control the videos: How to stop video playing after interaction
Is there potentially a simpler JS custom code script I could run or is my only option to interface with the API?
Thank you!
Here is my public share link: https://preview.webflow.com/preview/alto?utm_medium=preview_link&utm_source=designer&utm_content=alto&preview=eae35da30c9fb0e6d3f833685f714164&pageId=5ec0536ffaa83809d5e92939&mode=preview