2015-01-08 5 views
18

Sto cercando di mantenere un video di sfondo centrato indipendentemente da quanto l'utente trascina il video. Al momento sto tagliando il lato destro dei video quando scorrono più piccoli. Ecco quello che ho:Sfondo video HTML5, mantenere il centro del video al centro

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

vorrei che il centro del video per essere il centro della pagina sempre, anche se i lati vengono tagliati - che in realtà è l'ideale se avviene in questo modo. Gradirei qualsiasi aiuto. Grazie per aver letto!

risposta

33

ecco come Io di solito faccio video di sfondo, e come ho fatto per la pagina stre.am atterraggio:

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

stream fs vid for mobile

+1

Questa grande opera fino a quando ho colpito dimensioni mobili. Eventuali suggerimenti? Grazie! – ajmajmajma

+1

Non dovrebbe comportarsi in modo diverso a dimensioni mobili. assicurati di non interferire con stili di query multimediali. Ho allegato una foto di come dovrebbe apparire a dimensioni mobili. – Todd

4

Nel mio caso d'uso in cui ho sempre voluto il video per coprire il intera vista (non importa se le proporzioni della vista erano più grandi o più basse dei video), la soluzione di cui sopra non funzionava esattamente come intendevo. Al contrario, il seguente ha funzionato molto meglio:

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

Il mio video è stato 1920x1080, e questo funziona in IE11 (test non ha ancora inferiore) e oltre.

+0

Ha funzionato al meglio per me - inoltre, questo è un uso eccellente delle query multimediali! Ho aggiunto overflow: nascosto; a .video-container per impedire lo scorrimento a sinistra/a destra sul cellulare – alanvitek

0

questo ha lavorato per me

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