Site URL: https://sapphire-poodle-5w36.squarespace.com/config/pages
The following is the code we used for a testimonial; the pop-up works fine but when one closes it and the video is not paused, the background sound will keep playing. Please help us close the video pop-up without any background sound (aka stop the video on the background automatically ).
The code is on the New Testimonial page https://sapphire-poodle-5w36.squarespace.com/config/pages
password: hello97
Thank you for your time!
<!DOCTYPE html>
<head>
<title>Creating a modal window with HTML5 & CSS3</title>
<style>
.modalDialogH {
position: fixed;
font-family: Proxima Nova, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
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;
!important>
}
.modalDialogH:target {
opacity:1;
pointer-events: auto;
}
.modalDialogH > div {
max-width: 80%;
height: 70%;
position: relative;
margin: 10% auto;
padding: 5px 20px 20px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.closeH {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: 2%;
text-align: center;
top: 2%;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.closeH:hover { background: #00d9ff; }
h2
{
text-align:center;
}
</style>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<a href="#Haruka M., Phillips Exeter Academy (USA)"><img src="https://i.ibb.co/5L3Q0vL/Haruka-Image.png" alt="Haruka-Image" border="0"style="position:relative; display: block;
margin-left: auto;
margin-right: auto;
width: 80%;"></a>
<a href="#Haruka M., Phillips Exeter Academy (USA)">Haruka M., Phillips Exeter Academy (USA) [VIDEO]</a>
<div id="Haruka M., Phillips Exeter Academy (USA)" class="modalDialogH">
<div>
<a href="#closeH" title="Close" class="closeH">X</a>
<h2 style="font-size:2.5vw;">Haruka M., Phillips Exeter Academy (USA)</h2>
<h2></h2>
<iframe width="100%" height="80%" src="https://www.youtube.com/embed/W27_K-9fpI8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div> </body>
Beyondspace reacted to a post in a topic:
When closing video popup, the audio from the video is still playing on the background and need to stop or pause.
