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

Store Design

Topic summary

A Shopify store owner encountered an issue where video play buttons appeared in the top-left corner on mobile devices instead of being centered like on desktop. The problem also required three clicks to play videos on mobile (tested on iPhone 11).

Solution Provided:

  • Custom CSS code was shared to reposition the play button to the center of videos on mobile
  • Code should be added to base.css file in the theme’s Asset folder
  • The solution uses media queries targeting screens up to 786px width
  • Adjusts top, left, height, and width properties with !important flags

Remaining Issue:
While the positioning was successfully fixed, the multi-click requirement to play videos persists (currently 2-3 clicks needed). No immediate solution exists for reducing click count to a single tap, though the helper indicated they would update if a solution is found.

Additional Requests:
Other users joined asking for similar button customization for videos on their homepage and for adding sound-enabled buttons, with troubleshooting ongoing.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

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

2

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

1 Like
3

Hi Ahsan

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

Palaceleo_0-1658474746255.png
Palaceleo_0-1658474746255.png676×304 8.93 KB

4

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

1 Like
5

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

Palaceleo_0-1658475354443.png
Palaceleo_0-1658475354443.png1910×960 255 KB

6

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;
}
}
1 Like
7

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).

8

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

9

perfect, thank you!

10

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

Thanks!!

11

@Dphasma Please share the store URL

12

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

Thanks!!

13

you want button for this video?

download (45).png
download (45).png1776×852 163 KB

14

Yes!! this video

15

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

16

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?