I am workin in my web page and I added a video in the main banner of the home but in the mobile version said video does not cover the space that corresponds to the header in mobile.
Cómo puedo hacer para que mi video se pueda ver completo en el espacio correspondiente al encabezado del home?
Background video depend on aspect ratio of video, 1: If we will display full video width on mobile then It will show white space from top and bottom 2: And on other side if we show full video height then It will crop the video width from left and right side.
In your case you should use this css on media query (It will crop video from left and right)
@media only screen and (max-width: 768px) {
.video-home {
height: 100vh;
width: 100vw;
object-fit: cover;
}
}
But I have a suggestion for this, you must wrap your banner video and content into a div and then use position css for banner content and video something like this: