背景视频太大

背景视频太大

问题描述：

截图上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; 
}

答

可以使用object-fit CSS属性，以适应视频在其容器。使用，看看这是否能解决您的问题。另外，不需要保证金财产。

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

tnx兄弟帮助！ – Augurkturk

相关推荐