css - 视频背景创建水平滚动

Question

我在一个网站上工作，该网站的顶部有一个视频设置为背景。目前，视频会随着视口(viewport)缩小而缩小，在顶部和底部留下空白。正在关注this教程，我发现 min-height: 100%; CSS 属性解决了这个问题。但这会产生水平滚动，因为视频宽度现在比视口(viewport)宽。

这是我的标记:

<div id="cover">
   <video id="bgvid">
     <source src"..">
   </video>
</div>

这是我的 SASS

#cover 
    position: relative
    background-repeat: no-repeat
    background-size: cover
    background-position: center
    height: auto
    -moz-box-sizing: border-box 
    -webkit-box-sizing: border-box
    box-sizing: border-box
    overflow: hidden

    video#bgvid
        overflow: hidden
        min-width: 100%
        min-height: 100%
        width: auto
        height: auto
        z-index: -1

我意识到该教程在 #bgvid 上使用了 position: fixed，这消除了水平滚动，但使我的视频成为页面其余部分的固定背景。使用 width 属性也没有帮助。

欢迎提出任何建议。谢谢!

Answer 1

你可以添加

body {
    overflow-x: hidden;
}

到您的 CSS。

这将删除水平滚动。