How can I modify the play button icon on my Refresh theme videos?

[mrtkmk]

Hi all

I would like to change the play button icon on videos. At the moment it is a round circle with a white background. I’d like to change it to make it look more like a YouTube button (see Image 2 below).

I have found the below in a file called section-main-product.css. Could this be relevant? Although I don’t see what could change the white background to a red square

Any help greatly appreciated!

.thumbnail__badge {
color: rgb(var(--color-foreground), 0.6);
height: 2rem;
width: 2rem;
left: auto;
right: calc(0.4rem + var(--media-border-width));
top: calc(0.4rem + var(--media-border-width));
}

Image 1

Image 2

Thanks!

[shraddha_patel]

Hello,

May I have your site url please?

[mrtkmk]

Yes, no worries. It is in two places:

(1) Homepage:

https://www.farandwideofficial.com/

(2) Product page - as the last image:

https://www.farandwideofficial.com/products/family-passport-holder-black-for-4

Thanks

[PageFly-Victor]

Hi @mrtkmk ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-deferred-media.css->paste below code at the bottom of the file:

span.deferred-media__poster-button.motion-reduce {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background-color: red;
  border-radius: 0;
  cursor: pointer;
  border-radius: 10%
}

span.deferred-media__poster-button.motion-reduce:before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 35px;
  border-color: transparent transparent transparent white;
}

Hope my answer will help you.

Best regards,

Victor | PageFly

[shraddha_patel]

Add below css for homepage. At the bottom of the file component-deferred-media.css

Let me know once added.

.deferred-media__poster-button{
	background: red !important;
    border-radius: 9px !important;
    width: 8rem !important;
}
.deferred-media__poster-button svg{color: #fff !important;}

Below one for product page. At the bottom of the file section-main-product.css.

.thumbnail__badge{
	background: red !important;
    border-radius: 9px !important;
    width: 8rem !important;
}
.thumbnail__badge svg{color: #fff !important;}

[shraddha_patel]

Those css will make your page look something like this -

Hope it worked.

thank you

[mrtkmk]

Hi Shraddha, thank you. That worked perfectly.

However, I realised that it’s not changed for mobile . So any code for the mobile view would be appreciated!

Thanks

[shraddha_patel]

Please add below css under the previously added css in the file section-main-product.css.

@media only screen and (max-width: 749px) {
.product__media-icon{
background: red !important;
border-radius: 9px !important;
width: 4rem !important;
}
.product__media-icon svg{color: #fff !important;}
}

[mrtkmk]

Thank you. That worked well! One thing I did notice is that the change equally affects both the magnet icon and the play button icon, as you can see in the image below. Clearly somewhere in the code it can distinguish between an image and a video, which is why the icon changes, but I’m not sure where this happens.

Any help is appreciated. This is the last ask! I promise.

[shraddha_patel]

It’s fine to ask this. Just replace lastly added css with this new one. File name section-main-product.css.

@media only screen and (max-width: 749px) {
.product__modal-opener--video .product__media-icon{
background: red !important;
border-radius: 9px !important;
width: 4rem !important;
}
.product__modal-opener--video .product__media-icon svg{color: #fff !important;}
}

[mrtkmk]

Hi Shraddha

You totally sorted everything. Thank you so much!