Change Play Button on Embedded Video

Hi,

Does anyone have tips on how to change the play button on an embedded video?

I definitely would prefer for it to be more stylish than this.

Or I wish Squarespace would have more variety on the design. 

Can you provide link to this video on your site?

People have been asking for this simple feature since 2013.

It's seven years later.

The Squarespace play button will remain the boring white triangle it has always been.

You can't change the shape, the color, or the size.

I was struggling with this too, and then I realized you can eliminate the button:

.sqs-video-icon {
    display: none;
}

and then just bake a custom one onto your thumbnail.

Thank you for posting the code, and sorry for the dumb question... but where do I insert that code if I just want it to modify one video gallery block ? 

Thanks!

On 10/15/2020 at 12:43 AM, aa6 said:

Thank you for posting the code, and sorry for the dumb question... but where do I insert that code if I just want it to modify one video gallery block ? 

Thanks!

You need to target video gallery block id. Can you share site url? We can check easier.

You can add some custom css to get what you want.  I just wanted to make the default icon bigger, so I used this: 

.sqs-video-wrapper .sqs-video-overlay .sqs-video-icon {
   background-size: 88px;
   height: 88px;
   width: 88px;
   margin-left: -44px; /* for centering the icon, must be 1/2 the dimension */
   margin-top: -44px;
}

Be warned it looks a bit blurry on a high dpi screen like a phone or high end laptop.

If you want to use a different icon, you can change the background property.  The default is:

background: url('//assets.squarespace.com/universal/images-v6/damask/play-button@2x.png')

If you upload a new icon as an image you can update the background property to reference it, and use the above to size it appropriately.