John McEnroe Demo website - how do they do that?

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 

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.

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?

Yep, you can do it straight out of the box. The video is hosted on youtube. 

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 🙂

This doesn't work on the play video buttons right? 

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>

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!