How to stop playing a video when closing modal

Navigation
1

I'm using a css3 to open a modal window. Everything works perfectly, however when I close the modal window the video continues to play. What should I do to stop the video playing 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>
    
asked by anonymous 06.04.2018 / 18:26

2 answers

0

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>
    
06.04.2018 / 19:32
2

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

$(".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><divclass="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>
    
06.04.2018 / 20:14
Component with same height Remove a specific line in all files in a directory using PHP