使我的視頻頭響應

Question

好的，所以我的網站有一個視頻頭。我希望它在縮小瀏覽器（或在移動視圖中）時能夠響應，我該怎麼做？在我的顯示器上查看時效果很好，但只要我縮小瀏覽器窗口，視頻就會變小，並在其下方出現巨大的空白區域（大約500px）。 下面的代碼：

<div class="header-container"> 
     <div class="video-container"> 
      <video muted preload="true" autoplay="autoplay" loop="loop" volume="0" poster="4.png" 
       <source src="video/drift.mp4" type="video/mp4"> 
       </video> 
     </div> 
    </div> 
</div> 

.header-container { 
    width: 100%; 
    min-height: 1000px; 
    border-left: none; 
    border-right: none; 
    position: relative; 
    margin-top: 0; 
} 

.video-container { 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    height: 1000px; 
    width: 100%; 
    overflow: hidden; 
} 

video { 
    position: absolute; 
    z-index: -1; 
    opacity: 0.78; 
    width: 100%; 
} 

.header-container h1 { 
    color: #3cbc8d; 
    z-index: 1; 
    text-align: center; 
    margin-right: auto; 
    margin-left: auto; 
    margin-top: 10%; 
    border: 3px solid #fffff; 
    padding: 10px; 
    border-radius: 15px; 
    width: 700px; 
    letter-spacing: 3px; 
    font-size: 100px; 
    font-family: 'Montserrat', sans-serif; 
    } 

.header-container h2 { 
    color: #3cbc8d; 
    z-index: 1; 
    text-align: center; 
    margin-right: auto; 
    margin-left: auto; 
    border: 3px solid #fffff; 
    padding: 10px; 
    border-radius: 15px; 
    width: 700px; 
    letter-spacing: 3px; 
    font-size: 30px; 
    font-family: 'Montserrat', sans-serif; 
     } 

    <div class="header-container"> 
     <div class="video-container"> 
      <video preload="true" autoplay="autoplay" loop="loop" volume="0" poster="4.png" 
       <source src="video/cruise1.mp4" type="video/mp4"> 
       </video> 
         <h1>3P4B</h1> 
          <h2>Portable Power Pack for Boating</h2> 
          <div class="letsgo"> 
           <a href="#about" class="btn btn-sample hvr-pulse " role="button" style="font-size: 3.5em; border-radius: 50px; text-align: center;"><span class="glyphicon glyphicon-arrow-down"></span></a> 
           </div> 
     </div> 
    </div> 
</div> 

Answer 1

之所以在視頻下方的空白的視頻，就是視頻在保持寬高比的同時縮小屏幕尺寸。例如。因爲你已經將你的.header-container類鎖定在1000px的最小高度，所以你看到的空白是.header-container的背景。

編輯：背景視頻現在絕對定位，不干擾重疊的內容。 .header-container已被設置爲屏幕高度的94％，最大限制爲1000像素。

我想，這也許正是你要與你的當前設置：

.header-container { 
    width: 100%; 
    width: 100vw; 
    height: 94%; 
    height: 94vh; 
    max-height: 1000px; 
    border-left: none; 
    border-right: none; 
    position: relative; 
    margin-top: 0; 
    background-color: #000; 
    padding: 10% 0 0 0; 
    box-sizing: border-box; 
} 

.video-container { 
    position: absolute; 
    z-index: 0; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

video { 
    position: absolute; 
    opacity: 0.78; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%,-50%); 
    -mos-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
} 

.header-container h1 { 
    position: relative; 
    max-width: 80%; 
    display: block; 
    margin: 0 auto; 
    color: #3cbc8d; 
    z-index: 1; 
    text-align: center; 
    border: 3px solid #ffffff; 
    padding: 10px; 
    border-radius: 15px; 
    letter-spacing: 3px; 
    font-size: 100px; 
    font-family: 'Montserrat', sans-serif; 
} 

.header-container h2 { 
    position: relative; 
    color: #3cbc8d; 
    z-index: 1; 
    text-align: center; 
    max-width: 80%; 
    margin: 25px auto; 
    border: 3px solid #ffffff; 
    padding: 10px; 
    border-radius: 15px; 
    letter-spacing: 3px; 
    font-size: 30px; 
    font-family: 'Montserrat', sans-serif; 
} 

見更新筆在這裏：

http://codepen.io/flapjax/pen/zqXKaY

這縮放視頻始終填寫標題容器的整個背景寬度和/或高度。 它將模擬'封面'屬性並切斷一些視頻高度或寬度，以正確縮放它以填充標題容器。

Answer 2

這是否幫助你，請上傳的1920×1080分辨率

小提琴https://fiddle.jshell.net/3zLx1sdz/