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

How to change the play button on the video?


the_eddster
Go to solution Solved by trevordelaney1570047683,

Question

  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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 an

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.

Link to post
  • 3

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 post

Create an account or sign in to comment

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


×
×
  • Create New...