Jump to content

John McEnroe Demo website - how do they do that?

Recommended Posts

Site URL: https://johnmcenroe.squarespace.com

Hi everyone,

 

I hope you are all having a great day!

I just saw the demo website Squarespace developed in partnership with John McEnroe.

At the top, there's a section with a banner. The banner includes title, text and a button. As soon as you click the button, the section is replaced by a video. 

How do they do that? Is that available to us in the video plugin? 

Kindly,

Fernando 

Link to comment
14 minutes ago, fpt said:

I just saw the demo website Squarespace developed in partnership with John McEnroe.

At the top, there's a section with a banner. The banner includes title, text and a button. As soon as you click the button, the section is replaced by a video. 

How do they do that?

The title is part of the image file. The image can be added to a video as a custom thumbnail. The button is the video block's standard play button with some custom CSS for styling and to add the text.

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
1 minute ago, paul2009 said:

The button is the video block's standard play button with some custom CSS for styling and to add the text.

Paul, thank you. sorry to bother you...  how can we add this type of button to a video thumbnail? We can't do it straight out of the box right?

Link to comment

Derrick, thank you. I just realised that what Paul said is that the button is the usual white triangle but with CSS customisation to add text, change shape and location in the screen. 

Now I just need to find out that code 🙂

Link to comment

It should, the CSS code changes the style of the button not what it is linked to. Like this code that I use to create a drop shadow and change the color. I can place it in custom css (without the <style>) or advanced header code injection of a particular page. 

<style>
  .button-block {
  filter: drop-shadow(8px 8px 8px #666666);
}</style>

Edited by derricksrandomviews
Link to comment
35 minutes ago, fpt said:

I just realised that what Paul said is that the button is the usual white triangle but with CSS customisation

Exactly!

change-video-button-with-css.thumb.gif.1845d77784f41767ad654192c1c71ebd.gif

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.