MediaElement.js + Reveal JQuery modal: how to pause video/audio on <a=“close-reveal-modal”>&#215;</a>

Question

How do I simultaneously pause the player AND cause the the containing modal to slide up/away (to "un-reveal")?

Presently, after the play button is clicked, and the modal's upper-left (x)...the & #215;...is clicked...the modal slides away, but the video continues to play. To avoid this, the user must: 1) pause the video, and THEN 2) close the modal. I'd like a click or tap on any of the modal's triggers--for instance, clicking the (x)--to do both actions at the same time. I'm trying to find a solution that will work across platforms / devices.

Here's what I got so far, which is not working...

IN HEAD OF DOM BETWEEN SCRIPT TAGS

      document.getElementById("pauseX").onclick = function () {
      document.getElementById('player2').pause();
      };

TRIGGER TO REVEAL MODAL

   <a href="#" data-reveal-id="vid-1">Click here to reveal modal.</a>

VIDEO + MODAL CONTAINER

   <div id="vid-1" class="reveal-modal">
       <div class="center">
           <video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
               <source type="video/mp4" src="../media/vid-1-480x320.mp4" />
               <source type="video/webm" src="../media/vid-1-640x480.webm" />
               <object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">         
                   <param name="movie" value="../build/flashmediaelement.swf" /> 
                   <param name="flashvars" value="controls=true&amp;file=../media/vid-1-480x320.mp4" />         
                   <img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1" 
        title="No video playback. Update browser, enable Javascript, or install Flash." />
               </object>    
           </video>
          </div>
          <a id="pauseX" class="close-reveal-modal">&#215;</a>
   </div>

Already tried many other solutions, including...

Javascript to stop HTML5 video playback on modal window close

...so any help is appreciated. I think it's possible either the MediaElement.js or Reveal.js file may need to be tweaked or something?

Incidentally, clicking anywhere outside of the modal--i.e., on the "gloss"--causes it to slide up/away; hitting the escape key on the keyboard does the same. Clicking anywhere on the video player causes it to pause. Would love it if all of these functions are retained along with tapping on mobile devices. (Haven't tested that yet.)

Answer 1

Got it solved with this script...

<script>
    $('.close-reveal-modal').click(function() {
        $('video, audio').each(function() {
            $(this)[0].player.pause();        
        });
    });
</script>

There were multiple MediaElement.js vids on each page (one for each potential modal)...each vid being identified with the same id="player2" attribute...which was also keeping the page from validating. Tried switching that in my original script from getElementByID to getElementByName...didn't work. Created a class in lieu of an ID for each player...that didn't work. Irregardless of the validation issues: the above solution--simply inserting the .close-reveal-modal class directly into the "stop all" script for MediaElement.js works great. (Thanks @Fabrizio for suggesting I examine my ID attributes to begin with...)

Answer 2

if you have document.getElementById("pauseX").onclick... at the top of your document probably the code doesn't work because element with id pauseX is not already on the dom. Look at the javascript console, you should see some related error

Try to move these instructions on the bottom or on DOM ready event