JS won't work to play and pause videos

Design help Custom code
1

I have a page that is powered by the CMS. It displays a number of headshots and names, and when the headshot is clicked it will open a pop up with a video inside of it.

I wrote some code to play the video on click of the element that opens the pop up and pause it when the user clicks the “exit” area outside of the video.

I’ve tested my click functions to make sure everything is registering, and it is. But for some reason it just won’t start the video or pause it like it’s supposed to.

Any help would be greatly appreciated, the code is located within div block 4 within the CMS item itself. THere is an element named bubble modal and within that there is the content for the pop up including the HTML embed.

Here is my site Read-Only: [https://preview.webflow.com/preview/zaubar-ffb?utm_medium=preview_link&utm_source=designer&utm_content=zaubar-ffb&preview=29a1119b8c8911defbea11d609d2a713&pageId=62058f6eaebbee058bde67e8&workflow=preview)]

2

You can maybe do that with just Webflow.

If you use the Lighbox component, and hack its style to make it look like you want, it will take care of shutting the video off when the lightbox is exited.

3

Yeah I figured - thank you for the response. The client had already set it up with the CMS so I was hoping I’d be able to avoid that but no clue as to why the code is not working

4

HI @franzruggiero if the language you have used to write this code meant to be javaScript

CleanShot 2022-03-29 at 21.39.34

will never work as it is semantically incorrect mean it doesn’t make any sense to browser be able to do something with that.

5

Controlling the playback of a YT or Vimeo video usually require the use of their respective APIs.

6

Actually I was able to get this to work.

But now it seems like my code only effects the very first CMS item, even though my code was written to effect the class names

Any idea why this might be? Really thinking of just rebuilding this without the CMS now

[https://preview.webflow.com/preview/zaubar-ffb?utm_medium=preview_link&utm_source=designer&utm_content=zaubar-ffb&preview=29a1119b8c8911defbea11d609d2a713&pageId=6244f3e88e54cf5a88605863&workflow=preview]