How to the stop the video playing background of a popup video even after closing

Question

I had created a video popup by clicking on button using jquery. The problem is the video is still paying in the background even after the closing the video popup by clicking on close(X) button. Below is the code kindly help me to sort out this issue.

HTML:

<button class="light">Click Here</button>


    <div class="popup__overlay">
 <div id="popupVid" class="popup"><a class="popup__close" href="#">X</a><br />
<video id="framevideo" controls="controls" width="300" height="150">
    <source src="http://indivillage.in/eocares_test/wp-content/uploads/2018/12/y2mate.com-doremon_episode_mini_doremon__yziyijrh5E_360p.mp4" type="video/mp4" />
</video>
        </div>

CSS:

.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
text-align: center;
z-index: 100;
}

.popup__overlay:after {
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
content: "";
}

.popup {
 display: inline-block;
 position: relative;
 width: 100%;
 height: 100%;
 max-width: 640px;
 max-height: 480px;
 padding: 20px;


 color: white;
vertical-align: middle;
}

.popup-form__row {
margin: 1em 0;
}

.popup__close {
display: block;
 position: absolute;
top: 20px;
width: 20px;
height: 12px;
padding: 8px;
cursor: pointer;
text-align: center;
font-size: 20px;
line-height: 12px;
 color: white;
text-decoration: none;

 }

.popup__close:hover {
color: #eea200;
}

 #framevideo {
 width: 100%;
 height: 100%;
 }

JS:

   var p = jQuery(".popup__overlay");
  jQuery(document).ready(function(){
   jQuery(".light").click(function() {
   p.css("display", "block");
  });
  p.click(function(event) {
 e = event || window.event;
 if (e.target == this) {
  jQuery(p).css("display", "none");
  }
  });

 });

jQuery(".light").click(function() {
 p.css("visibility", "visible").css("opacity", "1");
 });

 p.click(function(event) {
    e = event || window.event;
  if (e.target == this) {
  jQuery(p)
  .css("visibility", "hidden")
  .css("opacity", "0");
  toggleVideo("hide");
  }
 });

  jQuery(".popup__close").click(function() {
  p.css("visibility", "hidden").css("opacity", "0");
 toggleVideo("hide");
 });

I had created a video popup by clicking on button using jquery. The problem is the video is still paying in the background even after the closing the video popup by clicking on close(X) button. Below is the code kindly help me to sort out this issue.

Pause the video on click of close button `$('#framevideo').get(0).pause()` — chintuyadavsara, Dec 07 '18 at 10:22
Please see the code here https://jsbin.com/vuyidilofe/edit?html,js,output — chintuyadavsara, Dec 07 '18 at 10:25

score 0 · Answer 1 · answered Dec 07 '18 at 10:23

You will need to pause your video before or while closing the popup. https://stackoverflow.com/a/22156790/20126 or stop it:

function stopMedia() {
  media.pause();
  media.currentTime = 0;
}

Also might be a solution is to remove the whole content of the popup html including the video tag, then create it again on opening it.

score 0 · Accepted Answer · answered Dec 07 '18 at 12:07

0

Make this change in the jquery code.

jQuery(".popup__close").click(function() {
p.css("visibility", "hidden").css("opacity", "0");
jQuery('#framevideo').get(0).pause()
toggleVideo("hide");
});

answered Dec 07 '18 at 12:07

Shaik

286
2
15
36

please explain the solution. – MrMaavin Dec 07 '18 at 12:18

How to the stop the video playing background of a popup video even after closing

2 Answers2