Video icon more visible on product image

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-video-button >a > span {
    max-width: 160px;
    transition:none;
    padding:20px;
}

1) To change the background color of the video button try the following Custom CSS.

.product-video-button > a {
background: red;
color: white;
}

2) To change the color of the icon try the following Custom CSS.

.product-video-button > a::before {
color: white;
}

3) To change the hover text color add the following Custom CSS.

.product-video-button > a:hover {
color: white;
}

You can adjust the colors according to your needs.

Best Regards

Hello,

Please provide the product page URL with the video I will correct CSS to make the label always visible.

Best Regards

Hello,

Replace the code with this one:

body .product-video-button >a > span {
    max-width: 160px;
    transition:none;
    padding:20px;
}
body .product-video-button > a {
background: red;
color: white;
}
body .product-video-button >a > span:hover {
    max-width: 160px;
    transition:none;
    padding:20px;
}
body .product-video-button > a:hover {
background: red;
color: white;
}

You should get this result: https://gyazo.com/17d8ed5d6e69b14be8481b6b66807d76

Replace the colors as per your needs.

Best Regards

You are welcome! If you have any questions please feel free to contact us.

Best Regards