视频背景创建水平滚动

我正在一个网站上有一个视频集作为背景的顶部。目前，随着视口缩小，视频会缩小，从而在顶部和底部留下空白。继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属性也没有帮助。

任何建议将受到欢迎。谢谢！

来源

2015-02-06 Florian Fischer

您可以添加

body { 
    overflow-x: hidden; 
}

到你的CSS。

这将删除水平滚动。

来源

2015-02-06 14:14:17

非常感谢！它确实解决了水平滚动，但是页面的其余部分仍然与更宽的视频对齐。所以内容实际上是中心对齐视频的宽度，而不是视口。有任何想法吗？ – 2015-02-09 14:29:10

我想不出什么。你会认为'＃cover'上的'overflow：hidden'会起作用。你可以将你的代码添加到jsFiddle吗？ – 2015-02-10 14:37:27

用纯HTML和CSS解决是不可能的。仔细研究之后，我的队友使用[this]（http://zerosixthree.se/create-a-responsive-header-video-with-graceful-degradation/）教程解决了这个问题。 – 2015-02-11 08:35:31

视频背景创建水平滚动

回答

相关问题