Getting rid of black bars in custom liquid video code?

[Elansimon]

Hi! I used a custom liquid for my homepage that uses a video loop auto-playing, there are 2 black bars on the top and bottom of the video that I want to take out, any want to do that from editing the code?

This is the code I am using:

<style> video { width: 80%; height: auto; display: block; margin: 0 auto; } </style> <video muted autoplay playsinline loop> <source src="https://cdn.shopify.com/videos/c/o/v/325795b7f28948af9a53a363417d8453.mp4" type="video/mp4"> <source src="/media/cc0-videos/flower.mp4" type="video/mp4"> </video>

I have also attached a screenshot of what it looks like now, https://drive.google.com/file/d/1GOK95rhXBqpRVuXhJWDAHZECXC014Z7y/view?usp=sharing

Any and all help would be greatly appreciated!

Thanks! 

[Arif_Shopidevs]

Hello, @Elansimon 
If you share your site password , I can give you a quick solution. The things happen due to video area heigh and video height not match.  You can try to put height:100% ;
their and check what happens . The height gap show blank.

looking forward from you

Thank you

[BSS-TekLabs]

Hello @Elansimon 
Our team is ready to help you.
Please share your website URL so that we can check and assist you.