What I need is part of this video to be hidden if its over the containers height.
I thought that overflow hidden would be the solution here but somehow it doesn't seem to want to listen.
code:
body,
html,
.container,
#video-background {
height: 100%;
margin: 0;
padding: 0;
}
html {
overflow-x:hidden;
}
#video-background {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
#video-background {
width: 100%;
height: auto; /* actually taller than viewport */
}
}
@media (max-aspect-ratio: 16/9) {
#video-background {
width: auto; /* actually wider than viewport */
height: 100%;
}
}
Here is my JSfiddle
https://jsfiddle.net/dqbq29ru/3/
Also it would be worth finding out or mentioning in comments if you've had problems with the video element in ie9 or up.
Many thanks
To fix this problem, avoid using vw for your max-width and use a max-width of 100% instead. This will transfer the width of the parent container to the width of the child container.
Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
Overflow happens when there is too much content to fit in a box. CSS provides various tools to manage overflow. As you go further with CSS layout and writing CSS, you will encounter more overflow situations.
Use overflow-x : hidden and overflow-y : scroll , or overflow: hidden scroll instead. Use overflow: clip instead. As of Firefox 63, -moz-scrollbars-none , -moz-scrollbars-horizontal , and -moz-scrollbars-vertical are behind a feature preference setting.
The answer to this question is that the position absolute on the video tag prevents the use of overflow hidden.
So I removed this from the video tag as it was not needed in the end and added an overflow hidden to the container.
Thanks
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