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

Question

我需要的是在视频超过容器高度时隐藏该视频的一部分。

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

代码:

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 或更高版本中遇到视频元素问题，也值得找出或在评论中提及。

非常感谢

Answer 1

这个问题的答案是video标签上的position absolute防止使用overflow hidden。

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

谢谢