After creating a video popup that plays upon clicking a button using jQuery, I encountered an issue where the video continues to play in the background even after closing the popup by clicking the close(X) button. Below is my code, can someone assist me in resolving this problem?
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>
</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");
});
Upon creating a video popup that launches when clicking a button using jQuery, I'm facing an issue where the video continues to play in the background even after closing the popup with the close(X) button. Can someone offer guidance on how to resolve this matter?