CODEWITHSUNDEEP
htmlcss
Eliaz
Eliaz

Reputation: 75

CSS : How to do dynamic margin to crop a video based on the format of the site?

I got a video (16:9) that I want to crop dynamicly (possibly with negative margin) to fit the whole screen. For a maximised window on PC I did

#homevid{
margin-top: -7%;
margin-bottom: -7%;}

But what should I do to also crop the sides when viewed on mobile and switch between both/adapt to weird aspect ratio ?

Upvotes: 1

Views: 326

Answers (2)

Eliaz
Eliaz

Reputation: 75

Figured an answer, I can just use

object-fit: cover;

Upvotes: 2

Mariops99
Mariops99

Reputation: 1

For example:

The css style you write inside this is only executed when the client screen is thinner than 540px:

@media screen and (max-width: 540px) {
   //Your code 
}

The css style you write inside this is only executed when the client screen is wide than 540px:

@media screen and (min-width: 540px) {
   //Your css
}

Upvotes: 0

Related Questions