Jump to content

Embed a video within the accordion drop down menu

Recommended Posts

  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

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

accvideo.thumb.png.45a46e2c7f0796486501eee691d3841a.png

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

Edited by tuanphan
more detail

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
14 hours ago, tuanphan said:

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

accvideo.thumb.png.45a46e2c7f0796486501eee691d3841a.png

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

Link to comment
14 hours ago, tuanphan said:

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

accvideo.thumb.png.45a46e2c7f0796486501eee691d3841a.png

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 

 

Link to comment
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)

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

 

Screen Shot 2022-10-11 at 9.25.37 AM.png

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)

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
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 */

 

 

 

Edited by Takis
workable solution with potential problems
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.