How to stop playing a video when closing modal

Question

I’m using a css3 to open a modal window. Everything works perfectly, but when I close the modal window the video keeps playing. What should I do to stop video playback when closing the modal?

CSS:

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modal:target {
    opacity: 1;
    pointer-events: auto;
}

.modal > div {
    width: 640px;
    position: relative;
    margin: 10% auto;
    /*padding: 15px 20px;*/
    /*background: #fff;*/
}

.fechar {
    position: absolute;
    width: 30px;
    right: -15px;
    top: -20px;
    text-align: center;
    line-height: 30px;
    margin-top: 5px;
    background: #ff4545;
    border-radius: 50%;
    font-size: 16px;
    color: #8d0000;
}

HTML:

<div class="boxv">
    <p class="vid">
        <a href="#abrirModal17">
            <img alt="Illustration" src="../Images/icone-videon.png"/>
        </a>
        <span class="namev">Vídeo 17</span> Texto 1
    </p>
</div>

<div id="abrirModal17" class="modal">
    <div class="video">
        <a href="#fechar" title="Fechar" id="fechar" class="fechar">x</a>
        <video controls="controls" >  
            <source id="myVideo" src="../Video/video17.mp4" type="video/mp4"></source>
        </video>
    </div>
</div> 

Answer 1

You can search the video referring to the open modal and stop the execution in this way by clicking the class of the "close button":

$(".fechar").click(function(){
   $(this)
   .closest("div")
   .find('video')[0]
   .pause();
});

Example: (run in full screen)

$(".fechar").click(function(){
   $(this)
   .closest("div")
   .find('video')[0]
   .pause();
});

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modal:target {
  opacity: 1;
  pointer-events: auto;
}

.modal > div {
  width: 640px;
  position: relative;
  margin: 10% auto;
  /*padding: 15px 20px;*/
  /*background: #fff;*/
}

.fechar {
  position: absolute;
  width: 30px;
  right: -15px;
  top: -20px;
  text-align: center;
  line-height: 30px;
  margin-top: 5px;
  background: #ff4545;
  border-radius: 50%;
  font-size: 16px;
  color: #8d0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxv">
    <p class="vid"><a href="#abrirModal17"><img alt="Illustration" src="../Images/icone-videon.png"/></a><span class="namev">Vídeo 17</span> Texto 1</p>
 </div>


  <div id="abrirModal17" class="modal">
    <div class="video">
        <a href="#fechar" title="Fechar" id="fechar" class="fechar">x</a>
         <video controls="controls" >  
    <source id="myVideo" src="http://dvdteste.hospedagemdesites.ws/teste.mp4" type="video/mp4"></source>
</video>
    </div>
  </div>

Answer 2

Place the code snippet at the end of your html document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
   $(".fechar").click(function(){
      $.each($('video'), function () {
           this.pause();
     });
   });
</script>