Custom Code for CMS only applying to first CMS item

I have a CMS that is powering a page where there is a pop up and when the pop up is clicked it loads a video that is also powered by the CMS.

I wrote some custom code to autoplay the video when the pop-up is opened and stop the video when the pop up is closed.

The code itself is working, but it only works on the first CMS item. So for example, if I click the first item, the video plays and when I close out it stops. But if I click the second CMS item, the FIRST video starts playing and stops when clicked out. So it’s only effecting the first video, but the code was written to effect the class.

Any help would be greatly appreciated I will include the custom code and my read only.

let video = document.querySelectorAll(".videoplayer");
let playvideo = document.querySelectorAll(".bubbles-item");

$(video).get(0).paused ? $(video).get(0).play() : $(video).get(0).pause();

Read Only Link