中心觀在改變視窗

Question

的寬度，我有以下問題：

• 我想打一個視頻橫幅
• 的旗幟應該有一個固定的高度
• 當用戶正在瀏覽器-window較小的高度應保持

問題視頻的中心應始終保持視口的中心。

圖片我連着IMG來描述目標

代碼這裏是一個示例代碼，看看網站上的我的代碼現在

* { 
 
\t box-sizing: border-box; 
 
\t margin: 0; 
 
\t 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>