Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2
Sign in to follow this  

How to change the play button on the video?


8 answers to this question

Recommended Posts

  • 4

The button is infact a background image so your options are limited. You could try adding a black background to make it stand out though.

Click the Style Editor (paint brush) and go to 'Custom CSS' on the left. A window will pop up.. try adding this.

.sqs-video-wrapper .sqs-video-overlay .sqs-video-icon {
   background-color: #000000 !important;
   background-image: url("/universal/images-v6/icons/icon-video-48-light-solid.png");
   background-position: center center;
   background-repeat: no-repeat;
   cursor: pointer;
   height: 48px;
   left: 50%;
   margin-left: -24px;
   margin-top: -24px;
   opacity: 0.8;
   padding: 8px !important;
   position: absolute;
   top: 50%;
   width: 48px;

Squarespace Designer / Developer over @ Hop Creative.

Share this post

Link to post
  • 3

If all you want to do is make the play button black instead of white, here's all the CSS you need:

.sqs-video-wrapper .sqs-video-overlay .sqs-video-icon {
   background-image: url("/universal/images-v6/icons/icon-video-48-dark-solid.png");

Share this post

Link to post
  • 2

One way to get a custom icon (that is retina friendly) is to use CSS shapes. You can first hide the existing icon image, then draw a shape in its place. Note: support for this may be lacking in IE7 and earlier.

The following puts a triangle play icon inside a transparent circle:

.sqs-video-wrapper .sqs-video-overlay .sqs-video-icon {
 background-image: none;
 background-color: #E9B130;
 background-color: rgba(233,177,48,0.8) !important;
 height: 56px;
 width: 56px;
 padding: 0px !important;
 border-radius: 56px;
.sqs-video-wrapper .sqs-video-overlay .sqs-video-icon:after {
 content: "";
 width: 0;
 height: 0;
 border-top: 12px solid transparent;
 border-left: 14px solid white;
 border-bottom: 12px solid transparent;
 left:23px; top:16px;

Share this post

Link to post
  • 0

This is great.

I am also curious if there is a way to remove the play button altogether (and have the entire area of the movie thumbnail be clickable to start the video).

Or perhaps a way to use a custom play button icon?


Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

  • Create New...