8

I have found a good example of a fullscreen video on CodePen: https://codepen.io/dudleystorey/pen/knqyK

I have difficulties with understanding the following styles:

video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

Why we can't just specify min-width and min-height? Why do we need to set width and height to auto?

twelve_chairs
  • 83
  • 1
  • 1
  • 5

4 Answers4

13

min-width:100% makes sure the element is at least as wide as its container. width: auto allows the element to keep its original size.

So a combination of the two can be read as "let the element take up as much space as it needs, unless it is smaller than the width of its container, in which case make it as wide as the container". So basically what the code says is "I don't care if it overflows, just make it fill the page".

That being said, there is no reason to add width:auto as it is the initial value of width, unless to override some other CSS styling applied to the element.

In this example code, min-width would be sufficient.

ppajer
  • 3,045
  • 1
  • 15
  • 22
1

Thats not a good example having min-width:100% makes no sense to me.

Consider this:

div{
  width:100%;
  min-width:600px;
}

In this case, if the width of the page or container of the div is less than 600px, say 400px. In that case, it will default the width of div to 600px and add a scrollbar - which is greater than 100%

Polynomial Proton
  • 5,020
  • 20
  • 37
  • Thanks for the answer. In this case `min-width:100%; min-height: 100%` breaks `video` aspect ratio. See [scale HTML5 Video and break aspect ratio to fill whole site](http://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site) for more details. – twelve_chairs Feb 02 '17 at 15:28
1

I tested it in Chrome and it works fine with the width: auto; and height: auto; properties removed.

It's possible you're seeing an example of Cargo-Cult Programming (i.e. code that exists because the programmer thought it was necessary, but in reality it isn't necessary) - or it could be for a legacy browser bug (if this is the which is weird, as all browsers that support <video> all support CSS layout to a high degree of compliance.

Dai
  • 141,631
  • 28
  • 261
  • 374
  • Thank you for the answer. As you rightly mentioned `min/max-width/height` supported by more browsers than ` – twelve_chairs Feb 02 '17 at 15:36
0

Width: Auto

The initial width of a block level element like div or p is auto. This makes it expand to occupy all available horizontal space within its containing block. If it has any horizontal padding or border, the widths of those do not add to the total width of the element.

Width 100%

On the other hand, if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border (unless you’ve used box-sizing:border-box, in which case only margins are added to the 100% to change how its total width is calculated). This may be what you want, but most likely it isn’t.

Min-Width:

The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration.

A way to visualize

And Some Links below for further Reference and Clarification

https://i.stack.imgur.com/9yBHP.png

https://css-tricks.com/almanac/properties/m/min-width/

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Abhishek Agarwalla
  • 322
  • 4
  • 16