如何阻止视频标签溢出其容器div

Question

我需要的是隐藏这个视频的一部分，如果它超过容器的高度。

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

代码:

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

这是我的jsfield

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

如果你在ie9或更高版本中遇到视频元素的问题，这将是值得发现或在评论中提及的。

多谢

Answer 1

这个问题的答案是视频标签上的绝对位置可以防止使用溢出隐藏。

所以我从视频标签中删除了这个，因为它最终不需要，并添加了一个隐藏的溢出容器。

谢谢