Audio Player continues playing after navigation away from it

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: