How to change the play button on the video?

I'd like to change the play button on the embedded video in my website so that that it's more obvious (i.e, black instead of white transparent). How do I do that?

Thanks

the video button looks to be a image.

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;
}

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?

Thanks!

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;
}

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");
}

Thank you for this solution. I like this solution a lot because it looks more intentional than putting a black box behind the existing icon.

I am trying to customize a video play icon like this:http://www.iconsdb.com/dark-gray-icons/video-play-3-icon.html(but in white)

is this doable? thanks z

There is no "Custom CSS" in the Style Editor.