Urgent help: insert a video in pop-up window using this code

Site URL: https://butterfly-magnolia-5ta9.squarespace.com/config/pages

Hello everybody!

I really need help to figure out how I can inject a video url into this pop-up code please. 

Step 01. Insert the following into the code injection area of the advanced tab of the page you wish to utilize the pop-ups: 

<link href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" /><script src="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Step 2. Now you need to create two code boxes.

Code box 01 - For Display (this is your image or text that will show on the page)

<a href="#" data-featherlight="#bio-name">

<img src="image link goes here"</a>

<p style="text-align:center; color:#727272;">Text Goes Here</p>

Step 03. Code Box 02 - For your Bio/pop-up Window

<div style="display:none;">
<div id="bio-name">

<h3>Header/Name</h3>

<p style="font-family:Lato; font-weight:500; font-style:normal; font-size:12px; letter-spacing:.4px; line-height:2.18em; color:#999999;" !important>

Text goes in here.

</p>
  </div>
  </div>

Where can I insert the video url?

The password to this trial website is: hello97

You can see the edits/code on the Home page (Alex S., University of McGill, The American High School in Japan (Japan) SECTION

Try adding video with video tag

<div style="display:none;">
<div id="bio-name">

<h3>Header/Name</h3>

<p style="font-family:Lato; font-weight:500; font-style:normal; font-size:12px; letter-spacing:.4px; line-height:2.18em; color:#999999;" !important>

Text goes in here.

</p>
  <video width="320" height="240" controls>
  <source src="enter your video direct url here, you can get it in Vimeo or upload to your Squarespace site" type="video/mp4">
  Your browser does not support the video tag.
</video>
  </div>
  </div>

I tried but this is how it is showing...Did I do something wrong? Should I use the embedded link instead of the url?

Also my video is from youtube.

@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>

Upload video to your site to get direct url. direct url needs format at the end of url, eg .mp4, .mp3,...

With Youtube, try this code 

<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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/NFyxml7idZA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  </div>

To get iframe code >> access Youtube video >> Click Share >> Click Embed >> Copy code

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.

@tuanphan please read above

Hi @bangank36 could help please?

Can you share link to page where you added? I don't see video when clicking on

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.

On 8/27/2021 at 8:24 PM, EveR_ said:

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.

Hi,

/config is admin url. See how to find exact page url.

Also, if your site is expired, you can contact Squarespace Customer Care to extend it (free)

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.

I see image only, no title in the page

https://mayflower-oriole-63kg.squarespace.com/home?noredirect

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.

With Jiro, you want to move it to top, make it not cut off?

https://mayflower-oriole-63kg.squarespace.com/home?noredirect

passw: hello97

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.

On 9/1/2021 at 9:57 PM, EveR_ said:

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.

Try adding this to Design > custom CSS

/* Jiro Lightbox */
div[id*="Jiro"]>div {
    margin: 5% auto;
    max-width: 900px;
    max-height: 70%;
    overflow-x: hidden;
}
/* Alex */
div#bio-alex {
    padding: 2em !important;
}

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.

On 9/3/2021 at 4:29 PM, EveR_ said:

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.

Don't remove above code.

Add this to Design > Custom CSS

/* Make Alex Title-Image clickable */
div#page-section-612c92cf4596654d5a16ed1e .span-4 {
    position: relative;
}
div#block-yui_3_17_2_1_1630399428610_3293 {
    position: static;
}
a[data-featherlight*="alex"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
a[data-featherlight*="alex"] center {
    position: absolute;
    bottom: 0;
}

/* Alex Popup on Mobile */
@media screen and (max-width:767px) {
.featherlight-content {
    max-width: 85% !important;
}
}

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.