Return to previous page

Change the video play button - by agixcart

This topic has 8 replies, 4 voices, and was last updated 6 years, 11 months ago ago by Amzy Leel

agixcart

Participant

October 25, 2017 at 18:53

I have searched the forum and been through the customizing process for the theme. I see no way to change or modify the play button for videos from the product single view page. The current play button is horrible. Its hard to see and if you were catering to an older public like our company they would more than likely have a hard time finding the button. How can this play button be changed to an overlay image that is easier to see?

#176100 Copied

7 Answers
Rose Tyler

Support staff

October 26, 2017 at 09:17
Hello,

You may change color of video button using this code in Theme Options > Styling > Custom css:
```
.open-video-popup.showed, .open-360-popup.showed {
    background-color: cadetblue;
}
```
Regards
#176126 Copied
agixcart

Participant

October 26, 2017 at 17:11

I am interested in changing the button all together to an overlay image. Could that be done in the same place? DO you mind giving me an example of that css?

#176188 Copied
Rose Tyler

Support staff

October 27, 2017 at 10:00
Hello,

Please try:
```
 .open-video-popup {
    background: url(image_link) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 0;
}
.open-video-popup:before {
	content: none;
}
```
Regards
#176225 Copied
agixcart

Participant

October 27, 2017 at 18:17

thank you for that. i was able to change the button using the above css, however there is a problem. the “viewable” area of the image overlay is still the same size of the original button. SO what i see is a square the same size of the old button that is only showing that one part of the new image. I have included a private link to the example.

Please, contact administrator
for this information.

#176273 Copied
Olga Barlow

Support staff

October 28, 2017 at 10:55
Hello,

Ok, then improve the previous code to the following
```
.open-video-popup {
    background: url(image_link) no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 30px;
    width: 160px;
}
```
Regards
#176292 Copied
agixcart

Participant

October 30, 2017 at 19:10

Ok, looks like that got it. I appreciate the help. thanks.

#176418 Copied

Amzy Leel

Participant

October 31, 2017 at 05:16

You are welcome.

Do not hesitate to ask if you have any questions (in new post/topis)

Regards,

#176433 Copied
Viewing 8 results - 1 through 8 (of 8 total)