Stop YouTube Video when modal is closed

Hello everyone!

I’ve created a website with a portfolio section. A click on one of the portfolio cards opens a modal (it’s currently visible in the read only link).

There is supposed to be a video inside, that can be played and for the live of me I can’t figure out how to stop the video on closing the modal.

I know. This question has been asked several times on the Webflow forums and there are countless answers. I tried just about every solution and none of them worked for me.

Some of them made all interactions and even my vertical scrolling just stop working for whatever reason and others just didn’t produce any result at all. It’s probably my own fault of course, since I’m not proficient in html, css or js and just try to implement custom code in a crude way.

I’d really appreciate any help I can get, or even further explanation regarding any other solutions.

Thanks a lot!
Sincerely,
Pablo


Here is my site Read-Only: LINK

Hi @Icho_Tolot

I have come across this task before and solved with by using some Javascript. Here is an example of using an outside element to stop the video when clicked. in this case, it would be the surrounding div or close button. The codepen below was something I used and then adapted for a webflow client to achieve what it is you are looking for.

Happy to chat some more

Hey @Chris_Waterhouse

Thanks for the reply! That looks perfect. I have a close modal button and would like to use it to stop the video. Sadly, I have no idea how I could implement the codepen you sent me in my site to enable this functionality.

Do I just have to copy the javascript to my custom code page section and change my class names? I don’t believe so :grimacing:

Thanks a lot again!

Hey @Icho_Tolot

What you could do is copy this section


into a html element for each of the videos (A much better way would be to have just one modal and that grabs information from the source image that is clicked / stored in reference to your CMS). But thats a different set of code. (This can be seen working here https://bodygym.com/pages/workouts on the workout images) Not webflow but the make up is similar.

Then add the Javascript to the footer of the site and then change this
image
to match the css classes of the elements you would like to action the close.

Thank you so much! I will try to implement this. The data-plyr-embed-id is the unique video ID I guess?

I just tried it and I can’t get a working video out of the code. Neither in the modal nor elsewhere on the site. I also tried using the whole html part you sent and can’t get that working either. Except for the button, that one shows up.

Hey @Chris_Waterhouse

I just wanted to maybe bump this up because I still haven’t found a solution. Maybe you could give me some more info on how to get the video part working?

Thanks a lot,
Pablo

Hey @Icho_Tolot,

Ping me a message at chris@clickyclicks.co.uk and I will see what I can do.

Speak soon.