Jump to content

How to change the play button on the video?

Recommended Posts

  • Replies 8
  • Views 29.1k
  • Created
  • Last Reply

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.

Link to comment
  • 5 months later...
  • 3 months later...

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;
 opacity:1;
 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;
 position:absolute;
}



Link to comment
  • 1 year later...
  • 4 months later...
  • 3 months later...
  • 2 years later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.