How to make video responsive in full height on mobile?

I have a problem I don´t find the way to solve it. I´m trying to make a background video to be responsive, so it looks full height on mobile, and it´s almost done, but it shows two borders on top and bottom and I don´t find how to solve it. The video is loaded from Vimeo.

Could anyone please help me?? It´s a problem with css

And this is the css code I´m using :

.fluid-width-video-wrapper { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; pointer-events: none !important; overflow: hidden !important;

} .fluid-width-video-wrapper iframe { width: 100vw !important; height: 56.25vw !important; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 / min-height: 100vh !important; min-width: 177.77vh !important; / Given a 16:9 aspect ratio, 16/9*100 = 177.77 */ overflow: hidden !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }

Please help !! Thanks a lot !!

Topic vimeo css Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.