Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

EveR_

Member
  • Posts

    36
  • Joined

  • Last visited

  1. 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>
  2. Thank you so much, but the image is not clickable...The title went over the image as well, and when I click edit, it says that jiro and alex are in one code block! it also looks that the video is being cut out the screen when on mobile preview.
  3. Hi thank you! So, for Jiro testimonial: (see picture) the video is super stretched. For Alex: the code is working, but when I select the mobile preview the pop-up gets cut off. How can we mke it fit the mobile preview as well? Also, is there any way to make the pop-up open from the image as well? The last code I used (that I found on Squarespace forum) did not work out and it disrupted the layout. If you can, please focus on Alex's testimonial, thank you very much. I really appreciate your help and insight.
  4. For Jiro I would like to make it smaller to fit desktop and mobile preview. Video should not be cut out. For Alex, I would like for the pop up to have margins and to not disrupt the page's layout. Thank you.
  5. Try now. There are two different pop ups. The one under Jiro has two issues: (1)it's not centred and in order to adjust the vode to the mobile preview, on the desktop (2) layout the video got stretched. (here there is only one code block) The one under Alex needs (1) margins and it gets cut out when in preview mode. (here there are two code blocks) If you go on edit mode you can see the blocks under the images and the codes that have been used. i can share the codes here if you cannot access the page, even though you should have no issues. if you want I can add you as an admin ...this issue os really dragging to much time ufff (the password is the same, the page is Home page) https://mayflower-oriole-63kg.squarespace.com/home?noredirect You choose which one to focus on, because we have tried almost everything lol. Thank you for your time.
  6. Hi, the page is the "Home" page. I do not intend buying a new site since I already have one which is public; I use trial websites to try codes or structures, but thank you for the advice. Did you had any problems accessing this site? Did you manage to see the code? About SQ; all the codes we have been trying, even the ones that worked for ppl here in the forum, aren’t working properly this is why the SQ customer care replied to us with that message.
  7. Site URL: https://parrotfish-helix-nx86.squarespace.com/config/pages Hello, I found a way for SQ to accept a pop-up code without disrupting the layout. The only issue left is that it needs to be centred, insted it looks as in the picure. Not-linked page I am working on is: Testimonials EVE layout works (Copy) The pop-up code is the following: <!DOCTYPE html> <head> <title>Creating a modal window with HTML5 &amp; CSS3</title> <style> .modalDialog { 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> } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 560px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; 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; } .close:hover { background: #00d9ff; } h2 { text-align:center; } </style> </head> <body> <a href="#Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) >">Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) ></a> <div id="Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA) >" class="modalDialog"> <div> <a href="#close" title="fadeout" class="close">X</a> <h2>Jiro M., Dartmouth College (USA), Phillips Exeter Academy (USA)</h2> <h2><p style="font-family:Proxima Nova; font-weight:300; font-style:normal; font-size:16px; letter-spacing:0.02px; line-height:1.7em; color:hsl(0, 0%, 0%);" !important> “I spent about 3 months at the Chamber of Commerce in Japan, and that was a transformative time for me! I got to both experience doing business with diverse clients from both Japan and North America, and also organize the events we met them at! Having the opportunity to hear the stories of businessmen/women from overseas working hard in a foreign country was a unique experience I wouldn’t forget. This internship taught me both the intricacies of handling clients of all backgrounds and also the mechanics of organizing large events. I am extremely grateful for this opportunity offered to me and hope to keep on developing my skills that were nurtured during this internship.” </h2> <iframe width="560" height="315" src="https://www.youtube.com/embed/jbcwGBmfzdQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div> </body>
  8. Hi! The trial website expired in the meantime. I created a new one https://mayflower-oriole-63kg.squarespace.com/config/home passw: hello97 SQ customer care told me that sometimes codes will not display properly because of the program's build in code; for example, in this page I cannot see the video when clicking on the title, but other times it displays.
  9. Hi! I can see the video now! Thank you, but can you help me to put some margins to the pop-up? the text, the video are attached to the margins I'd like to put a bit of space. Without the video, the pop-up has margins (please see image number 2), but they disappear once the video is inserted.
  10. Please go here @tuanphan
  11. @tuanphan this is the full code; I used your suggestion for the video part, but it won't show... <div style="display:none;"> <div id="bio-alex"> <h3>Alex S., University of McGill, The American High School in Japan (Japan)</h3> <p style="font-family:Proxima Nova; font-weight:300; font-style:normal; font-size:16px; letter-spacing:0.02px; line-height:1.7em; color:hsl(0, 0%, 0%);" !important> "Throughout the summer of 2021, I was given the opportunity to work for two companies, DASH and CITEK, as well as a Ski Resort Fund. Working under DASH, a co-living business, we furnished an apartment building and set up the utilities and internet services for future residents. Furthermore, we managed the finances to identify all of the ordered, cancelled, and returned purchases. For the Ski Resort Fund, we created a presentation directed at potential investors about a potential Ski Resort fund to aid the struggling ski industry in Japan amidst the COVID-19 pandemic. Our main focus involved research, data analysis, and communication skills to present our findings regarding the market. For CITEK, a construction services company, we developed a homepage for potential clients and learned how to create an engaging and modern interface. From being involved in real world businesses to developing my data management and analysis skills, this internship under ConnectEd U has given me an invaluable experience." </p> </div> </p> <video width="320" height="240" controls> <source src="https://youtu.be/NFyxml7idZA" type="video/mp4"> Your browser does not support the video tag. </video> </div> </div>
  12. I tried but this is how it is showing...Did I do something wrong? Should I use the embedded link instead of the url?
×
×
  • Create New...