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.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.