Video doesnt resize well on pc but for mobile is good

AnikiHub
Visitor
1 0 0

Ι've used a video with custom liquid effects that looks very appealing on mobile, but on PC, it appears too large and blurry. I've applied CSS code that enhances its appearance on mobile, yet the changes I've made to the CSS don't fix the issue on PC

 

this is the liquid code :

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

</style>
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/vp/0a7688320cfd4fef94e9952642e38a0d/0a7688320cfd4fef94e9952642e38a0..."
</video>

and this is the css : 

 

/*mobile - small tablets*/
video {
width: 100%;
} /* any screen equal to or wider than 992px */
@media only screen and (min-width: 992px) {
video {
width: 25%;
}
}

Reply 1 (1)

EwaFromEcomNoon
Shopify Partner
18 1 1

Hello 👋
Please share the link to the page with the video, so I can help.

Need professional help? Contact me on ecomnoon.com