背景視頻太大

截圖上PC

這是一個背景的視頻。

問題。
當網站在全屏時視頻大小很大。我試圖讓它更小，保證金最高。但它的視頻減半。視頻必須在全屏和小屏幕上保持原有狀態。我該怎麼做呢？

<body> 

    <div id="videoContainer" class="half-black"> 
     <div class="videoWrapper"> 
      <video autoplay> 
       <source src="video/warwick.mp4" type="video/mp4"> 
      </video> 
     </div> 
    </div> 
    <div id="infoContainer" class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    </div>

CSS：

#videoContainer{ 
    height:auto; 
    background-color:darkslateblue; 
    border-bottom:5px solid black; 
} 
#infoContainer{ 
    background-color:dodgerblue; 
    height:40%; 
} 

.videoWrapper > video { 
    width: 100%; 
    margin-top:-35%; 


} 
.videoWrapper{ 
    overflow: hidden; 
}

來源

2017-02-10 Augurkturk

可以使用object-fit CSS屬性，以適應視頻在其容器。使用，看看這是否能解決您的問題。另外，不需要保證金財產。

.videoWrapper > video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

來源

2017-02-10 13:44:25 vikrantnegi007

tnx兄弟幫助！ – Augurkturk

背景視頻太大

回答

相關問題