视频背景创建水平滚动

Question

我正在上一部分视频设置为背景的网站上工作。目前，视频在视口缩小时缩小，在顶部和底部留下空白。在this教程之后，我发现min-height: 100%; CSS属性可以解决问题。 但这会创建一个水平滚动，因为视频宽度现在比视口宽。

这是我的标记：

<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

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

欢迎任何建议。谢谢！

Answer 1

你可以添加

body {
    overflow-x: hidden;
}

到你的CSS。

这将删除水平滚动。