How can I fix the video background scaling issue for mobile on my custom liquid?

Solved

How can I fix the video background scaling issue for mobile on my custom liquid?

ZayMadeThis
Visitor
2 0 0

 

I have a problem with my custom liquid im trying to make a video background for this webstore and im having trouble with making it work on mobile phones it scales perfect for desktops...

Site(https://rpghd7301gqcman5-71902593314.shopifypreview.com)

!CODE BELOW!

<style>

video {
display: block;
margin: 0 auto;
width: 100%;
height: 100%;

}
<video autoplay loop playsinline muted>
<source src="MYFILELINK">
</video>

Accepted Solution (1)

GemPages
Shopify Partner
5625 1262 1248

This is an accepted solution.

Hello @ZayMadeThis 

I would like to give you the recommendation to support you.

 

You can try the below code so the video will show full width and autoplay on the mobile:

<video loop="" muted="" playsinline="" autoplay="" src="https://cdn.shopify.com/s/files/1/0349/7472/8236/files/vitakey-gif_3.mp4?v=1591688508" width="100%" height="100%"></video>

I hope the above is useful to you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 3 (3)

Typostore
Shopify Partner
117 11 13

Hello,

if you want make auto play on mobile I think you need custom more code jquery for it

function this can make auto play on mobile and desktop, and use some css to fix bug on desktop ver.

You can hire a shopify expert who will surely help you.

You can connect with us, too. We would love to help you out.

thank you

- I'm dev shopify. | Skype : hoang.nguyenit92 | Email: typostores@gmail.com
- Is my reply helpful? Click Like to let me know!
- If you got your answer? Mark it as an Accepted Solution

GemPages
Shopify Partner
5625 1262 1248

This is an accepted solution.

Hello @ZayMadeThis 

I would like to give you the recommendation to support you.

 

You can try the below code so the video will show full width and autoplay on the mobile:

<video loop="" muted="" playsinline="" autoplay="" src="https://cdn.shopify.com/s/files/1/0349/7472/8236/files/vitakey-gif_3.mp4?v=1591688508" width="100%" height="100%"></video>

I hope the above is useful to you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ZayMadeThis
Visitor
2 0 0

yeah no that didnt work here is the actual problem im having

ZayMadeThis_0-1676533830077.png