Video doesnt resize well on pc but for mobile is good

[AnikiHub]

Ι'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%;
}
}

[EwaFromEcomNoon]

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