CODEWITHSUNDEEP
htmlcss
Amine El were
Amine El were

Reputation: 855

how to resize a video with css

I'm trying to make a video responsive with all the screens and I'm going from desktop version to the mobile version, well as expected the video's well organized on the desktop version but when It comes to the mobile version it's a mess, as you see:

desktop version

enter image description here

Mobile version

enter image description here

as you see it doesn't fill the entire space I tried doing this with css but it didn' work I'm sure I did something wrong here but I don't know what it's:

.header__video {
    max-width: 100vw;
    width: 100%;
max-height:100vh;
height:100vh;
}

sorry guys this is my first time for me with videos so please be easy on me, I even tried some searching in google as well in here at stackoverflow but I didn't find a solution so please I need help

aaaaaaand thank youuu in advaaaance =D

Upvotes: 1

Views: 1392

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19111

The good news is that you can add a single line of CSS to get this working, object-fit: cover. From MDN:

The object-fit CSS property sets how the content of a replaced element, such as an or , should be resized to fit its container.

In your case, the container is the document itself, meaning that adding object-fit: cover to your video will make it scale up to fill the dimensions of the parent element.

Upvotes: 2

Related Questions