video banner sizing

[v6]

Hello, I am using this liquid code for my store 

<div class="vid-wrap">
<video autoplay loop playsinline muted>
<source src="https://cdn.shopify.com/videos/c/o/v/25c2e7a7a2f24d9c8c2032984b482594.mp4">
</video>
<div class="content-wrap">
<h2 class="bannerheading h1" style="font-size:70px;color:white;font">
example text

</h2>
<div class="bannerbuttons">
<a href="" class="button button--primary">SHOP ALL</a>
</div>
</div>
</div>

For some reason when displayed on mobile view it is stretched downwards like the image below

I was wondering how to turn it back to normal, refer to image below