How to Center a Custom Liquid Video when Adjusting Width on Mobile?

How to Center a Custom Liquid Video when Adjusting Width on Mobile?

fowlerpatrick19
Visitor
2 0 0

I had to change the width of my custom liquid video so the text in the video would be bigger on mobile. Now, the video (on mobile) appears cut-off on the right side, so I need to shift it left so that it is centered. Below is the code I am using. Is there something I can quickly add that with always keep the video centered regardless of width? I've tried everything I can. Thanks

unnamed.jpg

 

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

@media (max-width: 900px) {
video {
width: 200%;
}
}
</style>

<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/179d4121a47f45dd940a9ec3d7575f00.mp4">
</video>

 

Replies 3 (3)

Beae_Cass
Shopify Partner
436 167 180

Hi @fowlerpatrick19 ,

Could you please share your store URL and password if it enabled, so that I can help you

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Demo Template
fowlerpatrick19
Visitor
2 0 0

wateriq
Tourist
6 0 1

Did you ever figure this out?

I'm trying to do the same thing with the same issue.