Embed a video within the accordion drop down menu

Site URL: https://frontieras.squarespace.com/clean-technology-v2

Hi, 

https://frontieras.squarespace.com/clean-technology-v2

How can I embed a video within the accordion menu, I know how to add a link but I would like the actual video to pop up and not just the link.

thanks!

Something like this? https://thung.squarespace.com/w-accordion?noredirect&password=abc (Pass: abc)

Default Accordion, you can't do this. Screenshot, I used a plugin

If you use a Business Plan or higher, you can add a Video Under Accordion, then we will give code to move it into Accordion Content.

If you use a Personal Plan, you can find another accordion on Codepen.io, then share link, we will convert it to Squarespace

14 hours ago, tuanphan said:

Something like this? https://thung.squarespace.com/w-accordion?noredirect&password=abc (Pass: abc)

Default Accordion, you can't do this. Screenshot, I used a plugin

If you use a Business Plan or higher, you can add a Video Under Accordion, then we will give code to move it into Accordion Content.

If you use a Personal Plan, you can find another accordion on Codepen.io, then share link, we will convert it to Squarespace

okay! yes it is a personal plan I will have a look at codepen.io

14 hours ago, tuanphan said:

Something like this? https://thung.squarespace.com/w-accordion?noredirect&password=abc (Pass: abc)

Default Accordion, you can't do this. Screenshot, I used a plugin

If you use a Business Plan or higher, you can add a Video Under Accordion, then we will give code to move it into Accordion Content.

If you use a Personal Plan, you can find another accordion on Codepen.io, then share link, we will convert it to Squarespace

https://codepen.io/fsarachu/pen/MyObNz

something like this with a youtube video embeded 

On 5/25/2022 at 4:34 AM, LindseyMexico14 said:

https://codepen.io/fsarachu/pen/MyObNz

 

something like this with a youtube video embeded 

 

I don't see video in this CodePen? Also, you can find Codepen code, with js box (look right on Codepen) show nothing (Personal Plan doesn't support JS code)

What is the css code to add video in accordion for those with a business plan or higher?

On 10/5/2022 at 1:10 AM, kremtown said:

What is the css code to add video in accordion for those with a business plan or higher?

You can add video under accordion, then share link, we can give code to move video into accordion content

Here's our website: https://www.renovatethedome.com/renovation. I want to move the community cloud content video under the Cloud Library section of the accordion.

On 10/8/2022 at 11:16 PM, kremtown said:

Here's our website: https://www.renovatethedome.com/renovation. I want to move the community cloud content video under the Cloud Library section of the accordion.

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('div#block-633c78dfdeb4958765ae3baa').appendTo('div#block-633c78df8dc758c619fa35a3 li:nth-child(1) .accordion-item__description');
	});
</script>

Thank you. Is there any way to get rid of the empty space that is left behind?

On 10/11/2022 at 8:25 PM, kremtown said:

Thank you. Is there any way to get rid of the empty space that is left behind?

 

It is a problem in Fluid Engine. Difficult to solve this. You can try add this to Settings > Advanced > Code Injection > Header

<style>
  @media screen and (min-width:992px) {
  .fe-633c78dfe4e391915b1c9d2b {
    grid-template-rows: repeat(40,minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto)) !important;
}
  }
</style>

You can also consider changing it to Classic Editor Section (When you add a section > Scroll down & choose Classic) or use a 3rd party plugin to add accordion (I usually use plugin)

On 10/10/2022 at 3:40 PM, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('div#block-633c78dfdeb4958765ae3baa').appendTo('div#block-633c78df8dc758c619fa35a3 li:nth-child(1) .accordion-item__description');
	});
</script>

 

@tuanphan

Your solution works like a charm for embedding Cookie Script’s cookie report java script inside an accordion (List of Cookies, at the bottom of the page).  I do however have a problem with the mobile view, and potentially the tablet one. It will not scale to fit the screen, half the text is missing. Scale needs to occur on this particular accordion and “child”. The other accordions, without script, scale properly. I suspect something in the CSS but can’t figure it. Desktop view from computer and mobile looks fine.

Additional question on styles

How can I change the fonts of the cookie report, let say to ariel 10, weight 100. Despite setting the Design in accordion as Paragraph 2, same as the other accordions, it uses another font, probably the script’s default.

Squarespace 7.1 business plan, https://www.tsiricos.gr/en/privacy

EDIT

72hs straight later, I managed to divinite a solution that works 100% by specifying font properties on script block and manually resizing the fonts for mobile view only.

However, If there is a more elegant solution whereby text scales automatically  depending the resolution as is the case with squarespace text blocks, I would be very interested to know it as this would solve any unforeseen future problems with different resolutions.

Solution : Insert code in CSS, altering block #, font and values accordingly

/* COOKIE SCRIPT REPORT ACCORDION */
/* General Font cookie report script */
div#block-yui_3_17_2_1_1675447221528_20915 {
font-family: "neue-haas-grotesk-display";   
font-weight:100;   
font-size:.9em;   
text-transform:none;   
letter-spacing:.0em;
margin-top:4px;
margin-bottom:10px;  
}
/* mobile view cookie report size font */
@media only screen and (max-width: 640px) {
div#block-yui_3_17_2_1_1675447221528_20915 {
font-size: .4em;
max-width: 100%;
  }
}
/* END COOKIE SCRIPT REPORT ACCORDION */

On 2/4/2023 at 9:08 AM, Takis said:

 

@tuanphan

Your solution works like a charm for embedding Cookie Script’s cookie report java script inside an accordion (List of Cookies, at the bottom of the page).  I do however have a problem with the mobile view, and potentially the tablet one. It will not scale to fit the screen, half the text is missing. Scale needs to occur on this particular accordion and “child”. The other accordions, without script, scale properly. I suspect something in the CSS but can’t figure it. Desktop view from computer and mobile looks fine.

Additional question on styles

How can I change the fonts of the cookie report, let say to ariel 10, weight 100. Despite setting the Design in accordion as Paragraph 2, same as the other accordions, it uses another font, probably the script’s default.

Squarespace 7.1 business plan, https://www.tsiricos.gr/en/privacy

EDIT

72hs straight later, I managed to divinite a solution that works 100% by specifying font properties on script block and manually resizing the fonts for mobile view only.

However, If there is a more elegant solution whereby text scales automatically  depending the resolution as is the case with squarespace text blocks, I would be very interested to know it as this would solve any unforeseen future problems with different resolutions.

Solution : Insert code in CSS, altering block #, font and values accordingly

/* COOKIE SCRIPT REPORT ACCORDION */
/* General Font cookie report script */
div#block-yui_3_17_2_1_1675447221528_20915 {
font-family: "neue-haas-grotesk-display";   
font-weight:100;   
font-size:.9em;   
text-transform:none;   
letter-spacing:.0em;
margin-top:4px;
margin-bottom:10px;  
}
/* mobile view cookie report size font */
@media only screen and (max-width: 640px) {
div#block-yui_3_17_2_1_1675447221528_20915 {
font-size: .4em;
max-width: 100%;
  }
}
/* END COOKIE SCRIPT REPORT ACCORDION */

 

 

 

Did you solve all?

On 2/8/2023 at 11:18 AM, tuanphan said:

Did you solve all?

Yes, with the solution provided just above. Funny enough, I deleted by mistake the footer and started fricking out. searching the internet for a solution, I fell into my own