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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.