視頻循環100％瀏覽器的高度和寬度

Question

我試圖插入一個視頻循環，在響應100％高度時顯示寬度爲&寬度，因爲瀏覽器窗口調整爲適合.stage-0。目前該視頻不適合寬度爲100％的高度&，並且#overlay已移到右側而不是坐在中央？任何幫助就如何創建這種效果，將不勝感激:-)

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    text-decoration: none; 
 
    font-size: 1em; 
 
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
a { 
 
    background: transparent; 
 
    border: none; 
 
    letter-spacing: 0.15em; 
 
    text-transform: uppercase; 
 
    transition: .3s color; 
 
    transition: .3s height; 
 
} 
 

 
header { 
 
    position: fixed; 
 
    height: 60px; 
 
    width: 100%; 
 
} 
 
.header-wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: transparent; 
 
} 
 
.header-bg, 
 
.header-content { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.header-bg { 
 
    color: gray; 
 
    background: white; 
 
    border-bottom: 1px solid black; 
 
    transition: .3s height; 
 
    height: 0; 
 
} 
 
.header-content { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    transition: .3s color; 
 
    color: white; 
 
    background: transparent; 
 
    height: 60px; 
 
    transition: .3s height; 
 
    overflow: hidden; 
 
    list-style: none; 
 
} 
 
ul { 
 
    width: 100%; 
 
\t text-align:center; 
 
} 
 
li { 
 
\t 
 
    padding-top: 15px; 
 
    display: inline-block; 
 
    *display: inline; 
 
    /*IE7*/ 
 
    
 
    *zoom: 1; 
 
    /*IE7*/ 
 
    
 
    margin-right: 50px; 
 
} 
 
.navBarLinks { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: inherit; 
 
    cursor: pointer; 
 
    font-size: .8em; 
 
    letter-spacing: 0.05em; 
 
    transition: .3s color; 
 
    padding-top: 15px; 
 
    line-height: 31px; 
 
} 
 
.instagram { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    float: left; 
 
    padding-left: 2%; 
 
} 
 

 
.home { 
 
    left: 50%; 
 
    position: absolute; 
 
    transform: translate(-50%); 
 
} 
 
.insticon { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    float: right; 
 
    width: 25px; 
 
    height: 25px; 
 
    padding: 15px; 
 
    cursor: pointer; 
 
    fill: white; 
 
    font-size: .8em; 
 
    letter-spacing: 0.05em; 
 
    padding: .05px 10px; 
 
} 
 
@media only screen and (max-width: 583px) { 
 
    .find { 
 
     display: none; 
 
    } 
 
} 
 

 
.hamburger { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    float: right; 
 
    padding-right: 3%; 
 
} 
 
#toggle-menu { 
 
    float:right; 
 
    display: block; 
 
    width: 15px; 
 
    height: 15px; 
 
\t } 
 
\t 
 
.header-wrapper #toggle-menu span { 
 
    width: 15px; 
 
    height: 3px; 
 
    position: absolute; 
 
    -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s \t ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; 
 
    -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; 
 
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; 
 
    -webkit-transform-origin: center; 
 
    -moz-transform-origin: center; 
 
    transform-origin: center; 
 
\t background: #fff; 
 
\t } 
 
\t } 
 
\t #toggle-menu span.top { 
 
    top: 0px; 
 
\t } 
 
\t #toggle-menu span.middle { 
 
    top: 6px; 
 
\t } 
 
\t #toggle-menu span.bottom { 
 
    top: 12px; 
 
\t } 
 
    
 
content { 
 
    height: 2000px; 
 
    background: orange; 
 
} 
 
.stage { 
 
    color: #fff; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    background: white; 
 
    border-bottom: 1px solid black; 
 
    font-size: 48px; 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 
.stage-0 { 
 
\t display: flex; 
 
    background: grey; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
    #overlay { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position: absolute; 
 
    top: 50%; 
 
    color: #FFF; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    width: 100%; 
 
} 
 

 
.video { 
 
    position: fixed; 
 
\t top: 50%; 
 
\t left: 50%; 
 
    min-width: 100%; 
 
\t min-height: 100%; 
 
\t -webkit-transform: translate(-50%, -50%); 
 
\t -ms-transform: translate(-50%, -50%); 
 
\t transform: translate(-50%, -50%); 
 
\t z-index: -999; 
 
\t overflow: hidden; 
 
} 
 
/*promo video scroll*/ 
 

 
.arrow-bounce { 
 
\t padding: 5%; 
 
    color: white; 
 
    left: 50%; 
 
    font-size: 26px; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    transform: translate(-50%); 
 
    -webkit-transition: -webkit-transform 0.6s ease; 
 
    -moz-transition: -moz-transform 0.6s ease; 
 
    transition: transform 0.6s ease; 
 
    -webkit-animation: arrow 1s infinite; 
 
    -moz-animation: arrow 1s infinite; 
 
    -o-animation: arrow 1s infinite; 
 
    animation: arrow 1s infinite; 
 
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); 
 
} 
 
@-webkit-keyframes arrow { 
 
    0% { 
 
     bottom: -13px; 
 
    } 
 
    50% { 
 
     bottom: -8px; 
 
    } 
 
    100% { 
 
     bottom: -13px; 
 
    } 
 
} 
 
@-moz-keyframes arrow { 
 
    0% { 
 
     bottom: -13px; 
 
    } 
 
    50% { 
 
     bottom: -8px; 
 
    } 
 
    100% { 
 
     bottom: -13px; 
 
    } 
 
} 
 
@keyframes arrow { 
 
    0% { 
 
     bottom: -13px; 
 
    } 
 
    50% { 
 
     bottom: -8px; 
 
    } 
 
    100% { 
 
     bottom: -13px; 
 
    } 
 
}

<header> 
 
    <div class="header-wrapper"> 
 
     <div class="header-bg"></div> 
 
     <div class="header-content"> 
 
      <ul> 
 
       <li class="instagram"> 
 
        <a href="" class="navBarLinks find">Find me on</a> 
 
        <a href="" class="navBarLinks in"> 
 
         <svg class="insticon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve"> 
 
          <style type="text/css"> 
 
           .st0 {} 
 
          </style> 
 
          <path class="st0" d="M50.1,121.7H28.8V53h21.4V121.7z M39.4,43.6c-6.8,0-12.4-5.6-12.4-12.4s5.5-12.4,12.4-12.4 
 
\t c6.8,0,12.4,5.5,12.4,12.4C51.8,38,46.3,43.6,39.4,43.6z M130.1,121.7h-21.3V88.3c0-8-0.1-18.2-11.1-18.2 
 
\t c-11.1,0-12.8,8.7-12.8,17.6v34H63.5V53H84v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7 
 
\t C130.1,84,130.1,121.7,130.1,121.7z" /> 
 
         </svg> 
 
        </a> 
 
       </li> 
 
       <li class="home"><a href="" class="navBarLinks">Logo </a> 
 
       </li> 
 
       <li class="hamburger"> 
 
       <a href="" id="toggle-menu" class="navBarLinks"> 
 
    <span id="top" class="burger"></span> 
 
    <span id="middle" class="burger"></span> 
 
    <span id="bottom" class="burger"></span> 
 
    </a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</header> 
 
<content> 
 
    <div class="stage stage-0"> 
 
<div id="overlay">Overlay Placeholder! </div> 
 
<div id="arrow"> 
 
      <span class="arrow-bounce"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns= \t "http://www.w3.org/2000/svg"> 
 
\t <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/> 
 
\t <path d="M0-.75h24v24H0z" fill="none"/> 
 
\t </svg> 
 
    </span> 
 
     </div> 
 

 

 

 
     <video class="media-player" loop autoplay src="http://ak9.picdn.net/shutterstock/videos/6236564/preview/stock-footage-cybernetic-brain-zooming-through-eye.mp4"> 
 
    </video> 
 
     
 
     
 
     
 
    </div> 
 
    <div class="stage stage-2">3</div> 
 
    <div class="stage stage-4">5</div> 
 
    <div class="stage stage-6">7</div> 
 
    <div class="stage stage-8">9</div> 
 
    <div class="stage stage-10">11</div> 
 
    <div class="stage stage-12">13</div> 
 
    <div class="stage stage-14">15</div> 
 
    <div class="stage stage-16">17</div> 
 
    <div class="stage stage-18">19</div> 
 
    <div class="stage stage-20">21</div> 
 
    <div class="stage stage-22">23</div> 
 
</content>