Remove Play Button

Hello — I am looking for a custom CSS code to either remove the play button on a video gallery or to make it fully transparent. As it stands, the play button is directly where I need my text to be. 

Website here

The site is private. You'll need to set a site password and tell us what it is, so that we can view it.
 

Set to password: 'Test'

You may want to retain the play button but move it above the titles so that visitors realise a video will play. To do this, add the following to Design > Custom CSS:

.collection-type-gallery .video-play-icon {
  bottom: 33%;
}

If you prefer to remove the icon, use this instead:

.collection-type-gallery .video-play-icon {
  display: none;
}

Thank you! This is great! 

Any chance you could share the CSS for moving below the text instead? 

Sure. Instead of 'bottom' use 'top' and set a percentage that works on all devices.

Thank you! 

Last question on this! Is it possible to change the size of the play button? 

I played around with it a bit and for me it worked like this:

Add this to the code from Paul:

 transform: scale(0.5,0.5) 

The two numbers define the scale of the X and Y. 

hope that helps

-lucas

Your site looks great! Was wondering how you achieved that design. You are using video blocks with a thumbnail image, right? How did you mange to have the thumbnail image without boarders? I can only seem to do that with images. Would love to know how you did your motion page.

Hi Paul, that looks like a really nice code line, unfortunatly it doesn't work on my website... 😞

https://preview-chocolate.squarespace.com/chris-balmond-2

Password: chocolate

Could you help me ? Thanks a lot !!

Cheers,

Pauline

Hi Paul,

I'm glad I came across these posts as I am also having a similar issue on the mobile site of Motion Graphics template cover page. 

To fix it, I'd like to remove the play button but the custom code above doesn't do anything when put in Design > Custom CSS.

Any advice?

On 12/4/2020 at 10:16 PM, citystringensemble said:

Hi Paul,

I'm glad I came across these posts as I am also having a similar issue on the mobile site of Motion Graphics template cover page. 

To fix it, I'd like to remove the play button but the custom code above doesn't do anything when put in Design > Custom CSS.

Any advice?

Can you share site url? We can check easier

Oh this is exactly what I need! But the code above doesnt work for me either. I would want the play icon removed. Please help me! :)

my site url is https://wedge-tomato-jyh6.squarespace.com/sillanalla

On 7/14/2021 at 5:24 PM, KasperViitta said:

Oh this is exactly what I need! But the code above doesnt work for me either. I would want the play icon removed. Please help me! :)

my site url is https://wedge-tomato-jyh6.squarespace.com/sillanalla

Add to Design > Custom CSS

/* hide play icon */
.sqs-video-icon {
    visibility: hidden !important;
}