Video icon more visible on product image

Hi,

If I add a video to the product page, it add an icon on the image if we hover this we see the video label

I’m looking for a way that will be more visible can you point the CSS related.
Also is there a way to have the label by default.

This is not very visible especialy if the background of the image is white.

Thanks

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

Do you have a JS snippet so by default it’s display video label not on hover like it is by default?

Hello,

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

Best Regards

I don’t have live access could you pooint me the css

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

Thanks

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

Best Regards

[Author]

Posts