使HTML背景視頻高度小和寬100％

我想添加背景視頻到網站，我試圖使其高度等於400px和寬度等於100％。但是，當我添加400px高度時，其寬度變小。我不想讓視頻全屏顯示，我希望它只有400px的高度（或者更大一些）和100％的寬度，就像airbnb.com一樣。使HTML背景視頻高度小和寬100％

這裏是HTML：

<html> 
    <head> 

     <link rel="stylesheet" href="style.css"> 
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
     <script src="bootstrap/js/jquery-3.1.0.min.js"></script> 
     <script src="bootstrap/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

     <div id="videoDiv"> 
      <video autoplay loop mute id="video"> 
       <source src="video/video.mp4" type="video/mp4"> 
      </video> 
     </div> 
     <div> 
      <h1>Hello</h1> 
     </div> 
    </body> 
</html>

這裏是CSS：

#videoDiv{ 
    height: 400px!important; 
} 
#video{ 
    position: fixed; 
    max-height: 400px!important; 
    min-width: 100%; 
}

Here是它的鏈接。請幫助！

來源

2016-09-17 S. Farooq

看看http://stackoverflow.com/a/3780896/3755692 – msrd0

但是當我添加最小寬度：100％，最小高度：100％它會全屏幕上！ –

所以這意味着我必須手動更改視頻的寬高比才能使其工作？ –

視頻元素的默認樣式表是object-fit: contain;，因此它始終保持其維度比率。所以你所要做的就是做「填充」而不是重寫。就像這樣：

#video{ 
    position: fixed; 
    max-height: 400px; 
    min-width: 100%; 
    object-fit: fill; 
}

來源

2016-09-17 23:18:23 theJoi

如果您這樣做辦法。 – theJoi

OMG！非常感謝！有用！你太棒了！ –

使HTML背景視頻高度小和寬100％

回答

相關問題