Change the Arrows on Product Page for the Product Gallery Video

Can you help me change the look of the Play Arrow for the Product Gallery Video on the product page? The arrow is right in the middle of the product.
Two options…
1) Can you help me move the arrow to the top left corner of the image?
2) Can I change the color?

Attachments:

You must be logged in to view attached files.

Hello,

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

.wd-video-actions .wd-play-video.wd-style-icon-bg-text {
   right: 230px;
   background-color: red !important;
   bottom: 270px;
   position: relative;
}

Best Regards.

Thank you. That worked on desktop, but the arrow is not showing up on mobile.

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the code in Theme Settings >> Custom CSS >> Custom CSS for desktop only.

And for the mobile, Try to add the code in Theme Settings >> Custom CSS >> Custom CSS for mobile only.

.wd-video-actions .wd-play-video {
    align-items: baseline !important;
    justify-content: left !important;
}

Best Regards.

I put the one code in desktop CSS. It works on the desktop. Thank you.

But….
I put the code in mobile CSS. The arrow does not show up. But it you touch that area on the screen of your phone, it plays the video. Can you help me with a code that will make a little arrow visible at the top left of the photo? Also, can you make it so the arrow doesn’t show up in the middle of the first photo in thumbnails? See attached. Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

[Author]

Posts