Solved

Play button Video

Palaceleo
Tourist
13 0 0

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

Accepted Solution (1)
Ahsan_ANC
Shopify Partner
1362 246 309

This is an 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;
}
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search

View solution in original post

Replies 15 (15)

Ahsan_ANC
Shopify Partner
1362 246 309

 

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Palaceleo
Tourist
13 0 0

Hi Ahsan

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

Palaceleo_0-1658474746255.png

 

Ahsan_ANC
Shopify Partner
1362 246 309

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Palaceleo
Tourist
13 0 0

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

Palaceleo_0-1658475354443.png

Ahsan_ANC
Shopify Partner
1362 246 309

This is an 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;
}
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Palaceleo
Tourist
13 0 0

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
Shopify Partner
1362 246 309

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Palaceleo
Tourist
13 0 0

perfect, thank you!

Dphasma
Visitor
3 0 0

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

 

Thanks!!

Ahsan_ANC
Shopify Partner
1362 246 309

@Dphasma  Please share the store URL

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Dphasma
Visitor
3 0 0

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

 

Thanks!!

Ahsan_ANC
Shopify Partner
1362 246 309

you want button for this video?

download (45).png

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
Dphasma
Visitor
3 0 0

Yes!! this video

Ahsan_ANC
Shopify Partner
1362 246 309

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

Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
BA8
Visitor
1 0 0

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?