溢出:对HTML5视频隐藏

2023-05-07 admin

我正在尝试隐藏包装在容器中的HTML5视频的溢出。然而，firefox和chrome中仍然有滚动条。当我尝试在Jsfiddle中重现这个问题时，它工作得很好(没有滚动条)，但同样的代码在火狐或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%;
  }
}

转载请注明出处:http://www.xiangbinbaiyi.com/article/20230507/1184707.html