Установите фокус при масштабировании изменения размера фонового видео в 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

ОБНОВЛЕНО - Это работает. Смотрите мой 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>