Question

我试图隐藏包装在容器中的HTML5视频的溢出。但是在firefox和chrome中仍然有滚动条。当我尝试在Jsfiddle中重新创建问题时，它工作正常（没有滚动条），但firefox或chrome中的相同代码会创建一个滚动并且不会隐藏任何溢出。

我知道如何隐藏HTML5视频的溢出，以及为什么它不起作用？ PS。我已尝试将容器的位置更改为各种内容，并尝试将overflow: hidden分解为overflow-x和overflow-y

<div class="video_container">
<video autoplay loop controls muted="true"class="video_window">
  <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

CSS

.video_container{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -100;
    overflow:hidden

}

video{
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}


@media (min-aspect-ratio: 16/9) {
  video {
     height: 300%;
        top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  video{
     width: 300%;
    left: -100%;
  }
}

Answer 1

如果你的DIV上有那些带有滚动元素的讨厌栏，那么这个应该可以解决问题。将其设置为包装元素（例如.video_container）

&::-webkit-scrollbar {
  display: none;
}

溢出：隐藏为HTML5视频

1 个答案: