Menu
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?
259
In many cases, applying width: 100% to a block level element is either unnecessary or will bring undesirable results. If you're using padding on the inner element and you use box-sizing: border-box , then you'll be safe.
The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width .
width: auto; will try as hard as possible to keep an element the same width as its parent container when additional space is added from margins, padding, or borders. width: 100%; will make the element as wide as the parent container. Extra spacing will be added to the element's size without regards to the parent.
The min-width media feature specifies the minimum width of a specific device. For instance, in the above section, we have enlisted some screen widths on the basis of the device type such as the minimum screen width of mobile devices is 320px. Example. @media screen and (min-width: 600px) { p {
Width: auto When an element has auto as a value for width, it can have margin, padding, and border without becoming bigger than its parent element. The width of its content box will be the content itself with the subtraction of margin, padding, and border.
Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.
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.
30
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.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
