2015-12-23 51 views
0

我正在嘗試做很簡單的事情:將視頻大小調整爲100%的屏幕寬度和100%的屏幕高度。但是,當我將寬度設置爲100%時,高度似乎會自動調整。HTML - 無法正確調整視頻的大小

這裏是我的HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="styles/index.css"> 
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"> 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <div id="screen_container"> 
      <video autoplay="autoplay" class="cover_vid" loop> 
       <source src="videos/boats.mp4" type="video/mp4" /> 
      </video> 
      <input type="button" id="back_abt" class="gen_design" value="Leave"> 
     </div> 
     <script src="scripts/specific1.js"></script> 
    </body> 
</html> 

CSS:

#screen_container 
{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
} 

.cover_vid 
{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
} 

我試圖儘可能避免使用JavaScript。我甚至試圖從PHP傳遞屏幕分辨率到視頻元素的寬度和高度屬性,但結果是一樣的。視頻似乎可以做任何想做的事情。

+0

您可能要檢查[這個問題](http://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site)。 – Desaroll

回答