Stop Youtube CMS videos from playing when modal is closed

Design help Custom code
1

Hello everyone, I have a CMS of video testimonials, that when clicked would pop out a modal that has some text description + the video itself (YouTube video).

The problem is, when the video continues to play even after I close the modal. I understand this requires a bit of Javascript which is well beyond my code knowledge.

Here’s a Loom summary of what I need

Here is my Read-only link for my Webflow

https://preview.webflow.com/preview/overcomingptsd?utm_medium=preview_link&utm_source=designer&utm_content=overcomingptsd&preview=098df886d9876c15d1519c3e575f0e5d&pageId=61080711823ff7064c403bdc&workflow=preview

2

image
image1919×967 207 KB

3

image
image1919×955 215 KB

image
image1916×938 215 KB

Then add below script in body

4

@eli-webdesigner 

    var autoStopperBtn      =   document.querySelectorAll('.auto-stop');

    for (var i = 0; i < autoStopperBtn.length; i++) {
        
        (function(i) {
            
            autoStopperBtn[i].onclick = function () {
                
            var autoStopperModule   =   autoStopperBtn[i].closest('.auto-stopper');
                
            var autoStopperFrame    =   autoStopperModule.querySelector('iframe');
                
            var autoStopperSrc      =   autoStopperFrame.src;
                
            autoStopperFrame.src = ''; // clears url, some browsers wont update the url if it matches existing value.
                
            autoStopperFrame.src = autoStopperSrc;

            }
            
        }(i));
        
    }
           
</script>
2 Likes
6

Wow. Thank you so much for taking the time to do that! That worked!!

Let me know how I may help you in return. I’ll be happy to drop you a testimonial or anything like that. Really appreciate it brother.

7

If you have any work or project for me please contact me on my profile https://www.upwork.com/freelancers/~019d398779c0f22888

1 Like
8

I will definitely do that. I’ve bookmarked your account for future projects. Thank you sir!

9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.