This should be easy please help!

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

```

Replace this line with your code.

<do not remove the three backticks above>

Can you be a bit more clear on what task and instructions and code you’ve written so I can help :smiley:

Hey thanks for the replay! As you can see I have the site pretty much done except for the glitch with the video (motion) sections audio still playing after I select the Exit button on the bottom of the modal playing the video. I have spent hours looking online and there is allot about stopping embedded Youtube video from playing using js. I am a novice with js and how to apply the code to work in my particular case isn’t working for me. The one thing I found that did work is this js code:

function vidpause() {
var video = document.getElementById(“video1”);
var button = document.getElementById(“video1stop”);
video.pause();
}

This bit was added to the exit button - onclick="vidpause()

Close

It only worked on the first video but the other three videos with sound continued to play audio after selecting the Exit button. I tried adapting the code so it included the other videos with different ID’s and vars’s but nothing worked -worse the one that did worked stopped working… what I need is a way of having the Exit button on each video modal to stop the video from playing. This way when I go to another section of the site I do not still hear the videos audio playing in the background. I would think this should be pretty straight forward but it’s driving me nuts. I hope this clears my problem up a bit. I have launched the site with the glitch but I would really like to fix it as I am using it linked with my resume seeking employment and I don’t want that to be an issue they run into. Thanks big time! ----- Original Message -----

My mistake I thought this was the other forum I was seeking help from. Yep this is the one where I didn’t enter anything in after the title. Anyway here’s the site I am referring to rmdigitaldesign.com the problem is with the portfolio/motion section -four of the animations have audio that does not stop playing when the exit button is pressed. Any help welcome…

The button that closes the modal window does not stop the video playback. If you want the playback to stop when you close the modal, consider adding a click event handler on the close button.

something like:

$('.modalCloseBtn').on('click', function( ){
    $('video').trigger('pause');
};

Source: http://stackoverflow.com/questions/5958132/javascript-to-stop-html5-video-playback-on-modal-window-close

Thank so much for responding!

After I add this java code into my html doc how does it target the model exit button? Do I add an ID to the button named modalCloseBtn? IF it does work by ID then will each button/modal need a unique ID and js code to work. I’m not sure I am grasping this correctly.
Here’s the code on the button now and below that is how I added in the js code in my html doc. where do I go from here?

Close ----- Original Message -----

I think in this situation it makes sense to target the element.

This code works:

$( "button:contains('Close')" ).on('click', function(){
    $('video').trigger('pause');
})

Yep I’m sure not getting it… I added this code to my html doc and nothing changes, the audio continues to play after closing the model with the exit button. Do I have to add anything to the button code? I believe my issue is I don’t understand how to apply this solution. I need a step by step of what to do with this and then I think maybe I could understand whats happening. Sorry, I am a novices.

try adding the javascript code at the bottom of the html document, right above the </body> tag.

you also within <script></script> tags

I really want this to work - trust me… I added the code as described below but the audio is stall playing after I select the exit button and leave the video. I understand the javascript “click” and “pause” part, but I don’t understand the targeting part - “button:contains(‘close’)” Does this mean its hunting for a button with the word Close in it? Looking forward to hearing back from you so that with your help I can finally conquer this. Thanks!

Do not state that something should be easy if you don’t know how to solve the problem.

To make our lives easier - add close-video class to every button that should close the modal and pause the video, example:

<button type="button" class="btn btn-default close-video" data-dismiss="modal">
  <i class="fa fa-times"></i> Close
</button>

And now, you just need to add event listener to elements with class close-video, and select the video element that is placed in the same modal.

Please, add this code just before </body> and after importing jQuery. You can’t use jQuery when it’s not imported. And you just did this.

So it should look like this:

  <script src="vendor/jquery/jquery.min.js"></script>
  <script>
    $(".close-video").click(function() {
      $(this).siblings(".modal-body").children("video").get(0).pause();
    });
  </script>
</body>

I have tested this solution on your site and it works. If it does not work - you are doing something wrong.

1 Like

Dear Maciej,
I have a smile on my face from ear to ear!!! Thank you so much, not only for your help - but for making your help clear and concise so that I could understand what was being done and how it was being done. You my friend have made my day!

I’m glad to hear that. You’re very welcome :slight_smile:

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