當在html中縮放調整大小的背景視頻時設置焦點

Question

嘿，大家我一直有一些麻煩，搞清楚如何將背景視頻集中在html中。 我花了很多時間來與幾乎沒有到目前爲止 我的代碼是

<style> 
.videoContainer 
{ 
    height:100%; 
    width:100%; 
    overflow: hidden; 
    position:relative; 
} 

.videoContainer video 
{ 
    min-width: 100%; 
    min-height: 100%;  
} 
</style> 

<div class="videoContainer"> 
    <video src="movie.mp4" autoplay="true" loop="true" muted="true"></video> 
</div> 

我一直在試圖找出如何把全屏幕視頻背景，只是有它您可以調整視頻中心的焦點，比如像調整網站的窗口大小，例如：http://urbaninfluence.com/

任何建議，將不勝感激。

Answer 1

UPDATED - This Works。請看下文中我的jsfiddle ...

嘗試添加以下樣式.videoContainer視頻

.videoContainer 
 
{ 
 
    height:400px; 
 
    width:600px; 
 
    overflow: hidden; 
 
    position:relative; 
 
    border:solid 1px #f00; 
 
} 
 

 
.videoContainer video 
 
{ 
 
    width: 100%; 
 
    height: 100%; 
 
    min-width:1920px; 
 
    min-height:1080px; 
 
    position:relative; 
 
    top:50%; 
 
    left:50%; 
 
    -webkit-transform:translate(-50%, -50%); 
 
    -ms-transform:translate(-50%, -50%);/*For IE9*/ 
 
    transform:translate(-50%, -50%); 
 
}

<div class="videoContainer"> 
 
    <video src="http://video.blendertestbuilds.de/download.blender.org/peach/trailer_1080p.mov" autoplay="true" loop="true" muted="true"></video> 
 
</div>