Video de fondo a pantalla completa y manténgalo centrado

Question

Estoy intentando crear un sitio donde reproduzca un video de fondo con algunos HTML5. Todo funciona a la perfección, funciona como yo quiero. Pero también quiero mantener la imagen centrada en la pantalla, incluso cuando un usuario cambia el tamaño del navegador.

<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video> 

Lo hice funcionar con jQuery, pero me preguntaba si hay una solución de CSS para esto.

function resizeHandler() { 
     // scale the video 
     var documentHeight = $(document).height(); 
     var documentWidth = $(document).width(); 
     var ratio = $('#video').width()/$('#video').height(); 

     if((documentWidth/documentHeight) < ratio) { 
      $('#video').css({ 
       'width': 'auto', 
       'height': '100%', 
       'left': '0px', 
       'right': '0px', 
       'top': '0px', 
       'bottom': '0px' 
      }) 

      var marginRight = $('#video').width() - $(document).width(); 
      $('#video').css('left', -marginRight); 
     } else { 
      $('#video').css({ 
       'width': '100%', 
       'height': 'auto', 
       'left': '0px', 
       'right': '0px', 
       'top': '0px', 
       'bottom': '0px' 
      }) 

      var marginTop = $('#video').height() - $(document).height(); 
      $('#video').css('top', -marginTop); 
     } 
    } 

Este es el jQuery que escribí para estirar la imagen para ajustarse a la pantalla, y para mantener el tipo de imagen centrada. No estoy seguro de si esto es posible en CSS, pero si alguien sabe cómo hacerlo, podría ser agradable.

Answer 1

Esto debería hacer que #video sea el tamaño completo de la ventana gráfica y permanecer allí cuando el usuario se desplace.

#video { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

Answer 2

Esta pregunta solo se ha hecho referencia en Place video with 100% height & 100% width using css or javascript

Creo que mi respuesta para eso podría ser el que usted buscaba?

Aquí está el código:

header { 
 
    position: relative; 
 
    height: 100vh; 
 
    z-index: 0; 
 
} 
 
header h1 { 
 
    text-align: center; 
 
    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif; 
 
    color: #fff 
 
} 
 
header video { 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -ms-transform: translateX(-50%) translateY(-50%); 
 
    -o-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    z-index: -100; 
 
}

<header> 
 
    <h1>Sample Title</h1> 
 
\t <video autoplay loop class="bg-video"> 
 
\t \t <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4"> 
 
\t </video> 
 
</header>

Y aquí es un working fiddle example.

esperanza de que va a ayudar a otra persona :)

Answer 3

me gustaría probar centrar el vídeo con posición absoluta en el interior de una envoltura fija. Así, por ejemplo:

Coloque el vídeo en el interior de una envoltura fija con anchura y la altura del 100%:

#video-wrap { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

Centro del video dentro de un área extra grande con auto margen:

#video { 
    position: absolute; 
    top: -9999px; 
    bottom: -9999px; 
    left: -9999px; 
    right: -9999px; 
    margin: auto; 
} 

y se extienden a tamaño completo con min-width y min-altura:

#video { 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
} 

---

Aquí el resultado final:

#video-wrap { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#video { 
 
    position: absolute; 
 
    top: -9999px; 
 
    bottom: -9999px; 
 
    left: -9999px; 
 
    right: -9999px; 
 
    margin: auto; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
}

<div id="video-wrap"> 
 
    <video id="video" loop autoplay> 
 
     <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
 
     Your browser does not support HTML5 video. 
 
    </video> 
 
</div>

Aquí también es un jsfiddle.

Answer 4

Usar la propiedad Css.ajuste de objeto: cubierta;

body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
video { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<video controls> 
 
    <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
 
    <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
 
    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
    <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
 
</video>