溢出：隐藏 HTML5 个视频

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 个视频

Overflow: hidden for HTML5 Video

html

css

overflow

html5-video