视频背景创建水平滚动答案

【问题标题】：Video background creates horizontal scroll视频背景创建水平滚动
【发布时间】：2015-02-06 13:52:04
【问题描述】：

我正在一个网站上工作，该网站的顶部有一个视频设置为背景。目前，随着视口的缩小，视频正在缩小，顶部和底部留下空白。按照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

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

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

【问题讨论】：

标签： css video background scroll html5-video

【解决方案1】：

你可以添加

body {
    overflow-x: hidden;
}

到你的CSS。

这将删除水平滚动。

【讨论】：

非常感谢！它确实解决了水平滚动，但页面的其余部分仍然与更宽的视频对齐。所以内容实际上与视频的宽度居中对齐，而不是视口的宽度。有什么想法吗？
我什么都想不出来。你会认为#cover 上的overflow: hidden 会起作用。您可以将您的代码添加到 jsFiddle 吗？
纯 HTML 和 CSS 无法解决。在研究了更多之后，我的队友使用this教程解决了它。