EveR_ Posted September 14, 2021 Share Posted September 14, 2021 (edited) 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> Edited September 14, 2021 by EveR_ Beyondspace 1 Link to comment
Beyondspace Posted November 9, 2021 Share Posted November 9, 2021 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 & 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, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🚀 Learn how to rank new pages on Google in 48 hours! 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment