視頻背景創建水平滾動

我正在一個網站上有一個視頻集作爲背景的頂部。目前，隨着視口縮小，視頻會縮小，從而在頂部和底部留下空白。繼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

視頻背景創建水平滾動

回答

相關問題