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

这是我的JSfiddle

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

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

非常感谢

Answer 1

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

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

由于

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

1 个答案: