更改视口宽度时居中的视点

Question

我有以下问题：

• 我想制作一个视频横幅
• 横幅应具有固定的高度
• 当用户使浏览器窗口变小时，高度应保持

问题视频中心应始终位于视口中心。

图片我附上了一张IMG来描述目标

代码以下是现在在网站上查看我的代码的示例代码

＆＃13;

＆＃13;

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
        
        .row {
            clear: both;
        }
        
        .spalten-6 {
            width: 49.99992%;
        }

        .spalten-12 {
            width: 100%;
        }
        
        .spalten-6,  .spalten-12 
        { float:left;} 
   
        .img-box img {
            width: 100%;
        }
        
        .img-box {
            border-left: 2px solid white;
            border-top: 2px solid white;
        }
        

#video-container {
    position: relative;
    height:300px
}
#video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;

}
video#bgVid {
    position:absolute;
    z-index:-1;
    background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}
video#bgVid.fillWidth {
    width: 100%;
   position:relative
}

＆＃13;

<div id="video-container">
<video id="bgVid" loop class="fillWidth" autoplay>
<source src=http://bigcom.com/assets/2014/08/iChooseB.mp4 type=video/mp4>
</video> 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

.video-container {
    position: relative;
    height: 500px;
    width: auto;
    overflow: hidden;
    background: url('http://ewallpaperhub.com/wp-content/uploads/2015/01/nature-wallpaper-3.jpg') no-repeat;
    background-size: cover;
}
.fillWidth {
  position: absolute;
   min-width: 100%;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

＆＃13;

<div class="video-container">
  <video id="bgVid" loop class="fillWidth" autoplay>
    <source src="http://bigcom.com/assets/2014/08/iChooseB.mp4" type="video/mp4">
  </video> 
</div>

＆＃13;

＆＃13;

＆＃13;