How can I adjust the video play button for better mobile viewing?

[Palaceleo]

Hi Guys

I need help regarding the use of videos in the product overview. While the play button is in the middle of the video on the computer, it is in the top left corner on the mobile view. How can I change this, or is there also a possibility for mobile to play the video with only one click? (Currently you need 3 clicks, click on video > click on play button > click again on play button / tested with Iphone 11).

Thank you for your help.

Here is my URL: https://vitavera.shop/products/vv-eloah-hoodie

[Ahsan_ANC]

Hi,

Can you try this code

1. Go to Online Store-> Theme->Edit code
2. Asset->/base.css ->paste the below code at the bottom of the file.

@media(max-width:786px){
.product__media-icon {
top: 40%;
left: 40%;
height: 10rem;
width: 10rem;
}
.product__media-icon .icon {
width: 5rem;
height: 5rem;
}
}

You can change these values according to your choice.

The top and left values make it in the center. you can change them to replace the button where you want.

The first width and height are for the play button white background and the second one is for the triangle play icon

[Palaceleo]

Hi Ahsan

Thank you for the reply. Where do i have to paste the code in?

[Ahsan_ANC]

You can paste it at the end. Like in the screenshot from line number 2865 onwards.

[Palaceleo]

I did it like that but it is not affecting the play button:

[Ahsan_ANC · Accepted solution]

Oh sorry for this please delete the code that you added and paste this new code

@media(max-width:786px){
.product__media-icon {
top: 40% !important;
left: 40% !important;
height: 10rem !important;
width: 10rem !important;
}
.product__media-icon .icon {
width: 5rem !important;
height: 5rem !important;
}
}

[Palaceleo]

It worked! thank you!!
Is there a way to play the video with the first click, otherwise you have to click three times to watch the video (kind of a bad experience).

[Ahsan_ANC]

On my side, it is playing after two clicks. and there is no option to reduce the click count. If I found any solution I will update it here.

Thanks

Ahsan ANC

[Palaceleo]

perfect, thank you!

[Dphasma]

Hi, i have the same question, but I need the button in a video from the home page.

Thanks!!

[Ahsan_ANC]

@Dphasma  Please share the store URL

[Dphasma]

Hi, this is my URL allreflectiveusa (shopifypreview.com)

Thanks!!

[Ahsan_ANC]

you want button for this video?

[Dphasma]

Yes!! this video

[Ahsan_ANC]

How did you add that video? share that custom code.

[BA8]

Hi Ahsan, I also need a button adding to my video in the hope it plays sound after clicking it. Can you help add it to the code?