Stop HTML5 Video Playing On Close Of Modal

Design help Custom code
1

I’ve seen some posts on this but nothing specific to my case that I know of…

I have an HTML5 Video player playing videos from dropbox in a modal. Just want to stop the videos playing when I close the modal…

I have close modal on an interaction…

Click on ‘Lagree Fitness’ or ‘NBCU’ thumbnails to activate ‘modal’ with videos.

Hope I can get some help and hopefully this helps others too!!

–

Site Preview : ZeroSix | Christopher Neil
Read only here : How to Pause and Stop a Video in a Modal on Close? - #2 by Todd

3

You can try to add below js to the Before < /body> tag field in Custom Code in your page settings.

<script>
$('.close-popup').click(function(){
  $('video').each(function(){
    $(this).get(0).pause();
  })
});
</script>
1 Like
4

Hiu!! You are a genius!! Thank you!!!

5

you are welcome. it is a simple js script, you can try to learn yourself, js is fun :handshake:

1 Like
6

I will try! I need to learn some languages and really learn to code! Thank you again!!

1 Like
7

Hi Hiu,
Can you break this up for me?
is .close-popup the button id?
and is ‘video’ the html id? or the source id?

Thanks

8

@ajaylingam

This code consists of a single script tag that contains a piece of JavaScript code. The code uses the jQuery library to select HTML elements and define certain behaviors for them.

Here’s a breakdown of what the code does:

  1. $('.close-popup'): This line selects all HTML elements with the class “close-popup”. These elements are typically used to close a popup window or dialog box.

  2. .click(function(){...}): This line defines what should happen when a user clicks on an element with the class “close-popup”. In this case, it will execute the code inside the curly braces.

  3. $('video'): This line selects all HTML <video> elements on the page.

  4. .each(function(){...}): This line loops through each <video> element that was selected in the previous line.

  5. $(this).get(0).pause(): This line gets the actual DOM element (not a jQuery object) of the current <video> element being looped through. It then calls the pause() method on it, which will pause the video.

In summary, this code will pause all videos on the page when a user clicks on an element with the class “close-popup”. This is useful when you have a popup window that contains a video, and you want to pause the video when the user closes the popup.

1 Like