html 视频超出隐藏,html – 如何阻止视频标签溢出其容器div.

我需要的是这个视频的一部分,如果它超过容器高度,将被隐藏.

我认为隐藏的溢出将是解决方案,但不知何故它似乎不想听.

码：

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%;

}

}

这是我的JSfiddle

https://jsfiddle.net/dqbq29ru/3/

如果您在ie9或更高版本中遇到视频元素问题,那么值得在评论中找出或提及.

非常感谢