This should be easy please help!

javascript

#1


Replace this line with your code.


#2

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


#3

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 -----


#4

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...


#5

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


#6

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 -----


#7

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

This code works:

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

#8

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.


#9

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

you also within <script></script> tags


#10

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!


#11

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.


Jquery: .remove() with confirm button
#12

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!


#13

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


#14

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