One Script to rule them all! (close a Vimeo with a Webflow element)

Design help Animations & Interactions
1

I, others, many others, have asked this question and so there are tons of different answers out there and most of them from a couple of years ago. I have posted my own for answers and didnt get too far. This is the very last element I need to figure out before I can finish up this site and for the life of me cannot.

Me: Beginners knowledge of code. HTML/CSS make more sense to me than JavaScript - but I am learning.

The Issue: I have created a button that opens a fullscreen video that is embedded html using Vimeo. That video is in a div and then I created a “Close Button” in that div that sits on top of the embedded html. This button has a close interaction that hides the video again but doesn’t stop the playing - To be honest it hides the div the html is in - not sure if the hierarchy is important here but Im attempting to add as much info as I can.

I have added various scripts that I have found on the forums and elsewhere. Some Im sure are not working because they are cobbled together from stack overflow posts but others work until……. I add another, separate video div with embedded html, with a separate close button. Now both videos can be hidden but neither are STOPPED.

I have tried various ways to write the script. I have taken out notes just in case, I have renamed and tagged everything numerous times and triple checked everything (with my amateur eyes). It worked and then it stopped and now all I have to do is figure out how to get both of them working, independently on my site.

This is the script I had the most success with closing one video:

$(document).ready(function() {
$(‘#closbadvibes’).click(function() {
StopEmbedVideo();
});
});

    function StopEmbedVideo() {
      var $frame = $('iframe#badvibes');

     // saves the current iframe source
     var vidsrc = $frame.attr('src');

    // sets the source to nothing, stopping the video
    $frame.attr('src',''); 

       // sets it back to the correct link so that it reloads immediately on the next window open
       $frame.attr('src', vidsrc);

    };
    </script>

After that, I am completely lost. Nothing I do makes it work and it seems like it could be a super simple thing and Im just blowing it. I need so help for sure.

Thanks in advance!! Im so close hahaha

edit: heres a live link for where the issue happens. Mother & Clone the panel on the right has a rollover and an interaction that opens the video. Theres also some nav at the top right - the thrid bullet down is the pane/video that the current java script is attached to.

Here is my public share link: LINK
(how to access public share link)

3

Please share a read only link to your project.