css - 更改视口(viewport)宽度时居中视点

Question

我有以下问题:

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

问题 视频中心应始终保持在视口(viewport)中心。

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

代码这是一个示例代码，现在可以在网站上看到我的代码

* {
	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
}

<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>

Answer 1

.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%);
}

<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>