Tło wideo w formacie HTML5, zachowaj centrum wideo w centrum

Question

Próbuję zachować wycentrowanie wideo w tle niezależnie od tego, jak duży użytkownik przeciąga wideo. Obecnie obcinają prawą stronę filmów, gdy przewijam mniej. Oto co mam:

<section id="home"> 
    <div class="video_shader"></div> 
     <div class="video_contain"> 
      <video autoplay="" loop="" poster="img/still.jpg" id="bgvid"> 
       <source src="/realWebm.webm" type="video/webm" /> 
       <source src="/realdeal.mp4" type="video/mp4"> 
       <source src="/reaOg.ogv" type="video/ogg" /> 
      </video> 
     </div> 
</section> 

.video_contain{ 
display: block; 
position: absolute; 
background-position: center center; 
background-repeat: no-repeat; 
background-size: cover; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
width: 100%; 
height: 100%; 
} 

video { 
min-width: 100%; 
min-height: 100%; 
z-index: -100; 
background-position: center; 
background-size: cover; 
} 

#home { 
width: 100vw; 
height: 100vh; 
display:block; 
position: relative; 
} 

Chciałbym środek video być w centrum strony zawsze, nawet jeśli strony się odciąć - to rzeczywiście idealny jeśli zdarza się w ten sposób. Doceniam każdą pomoc. Dziękuje za przeczytanie!

Answer 1

oto jak ja zwykle zrobić tło film, a jak to zrobiłem na stronie stre.am Bezpośrednie

.video_contain { 
    position: absolute; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
} 

video { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    margin: auto; 
    min-height: 50%; 
    min-width: 50%; 
} 

Answer 2

W moim przypadku użycia, gdzie zawsze chciał wideo na pokrycie cały rzutnia (bez względu na to, czy proporcje ekranu były większe lub niższe niż wideo), powyższe rozwiązanie nie działa dokładnie tak, jak zamierzałem. Zamiast dodaje pracował o wiele lepiej:

.video-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
} 
.video-container > video { 
    display: block; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 1; 
} 
@media screen and (max-aspect-ratio: 1920/1080) { 
    .video-container > video { 
    height: 100%; 
    } 
} 
@media screen and (min-aspect-ratio: 1920/1080) { 
    .video-container > video { 
    width: 100%; 
    } 
} 

Mój film był 1920x1080, i to działa w IE11 (test zrobił niższy) i poza nią.

Answer 3

ten pracował dla mnie

.video_contain { 
    position: absolute; 
    z-index: -1; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    right: 0px; 
    overflow: hidden; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    background-image: none; 
} 

#bgvid { 
    margin: auto; 
    position: absolute; 
    z-index: -1; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    visibility: visible; 
    width: 1267px; 
    height: auto; 
}