Jump to content

When closing video popup, the audio from the video is still playing on the background and need to stop or pause.

Recommended Posts

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 &amp; 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>

Edited by EveR_
Link to comment
  • 1 month later...
On 9/14/2021 at 11:34 PM, EveR_ said:

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 &amp; 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>

Do you still need, I suggest using lity library for playing the iframe video

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.