Aunque es tarde mi llegada, quiero compartir también mi forma de implementar este tipo de vídeo, ya sea como fondo, desplazado o fijo. Pero en este caso, hice una demostración solo para mostrar el vídeo de forma casi completa dentro del contenedor usando objet-fit: cover
, lo cual creo yo es la única solución más fácil.
Aunque no sé a fondo la estructura de tu página y de como se implementará el vídeo, esto solamente servirá como punto de partida de una posible solución propia.
Simplemente tenemos el contenedor row
del vídeo, a lo que debemos darle el ajuste adecuado con CSS para adaptar a la página. Yo le di un ancho máximo de 100% y una altura de 100vh (pantalla vertical completo) y restando con variables:
height: calc(100vh -100px)
Uso la altura total de la pantalla, pero le resto el header y el footer que da un total de 100px entre ambos (en esta demo).
Pero acá es donde puede ser complicado. Si en la página hay un objeto que sea fijo en la pantalla, entonces roba parte de la visibilidad del contenido debajo. En el caso de un móvil, si el menú de navegación esta en la pantalla (hablando del menú de Android), también roba visibilidad en la pantalla. Aunque es poco, no se vería una pequeña parte del video.
Lo siguiente es darle un toque al vídeo:
object-fit: cover
Con esta declaración el vídeo se muestra completamente en su contenedor sin dejar márgenes ni horizontal ni vertical. Si el vídeo es muy alto, se recorta arriba y abajo. Si el vídeo es ancho, se recorta a los lados. Pero todo de una forma "responsivo".
El resto de los estilos son para esta demo.
* {
box-sizing: border-box
}
:root {
--altura: 50px
}
html, body {
margin: 0;
padding: 0
}
body {
min-height: 100vh
}
header, footer {
display: block;
z-index: 1000;
width: 100%;
height: var(--altura);
background: #123
}
header {
position: sticky;
top: 0
}
.row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: calc(100vh - var(--altura));
overflow: hidden;
}
.row video {
display: block;
margin: auto;
width: 100%;
height: 100%;
object-fit: cover
}
.row .sobre {
disolay: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 1;
margin: auto;
width: 50%;
height: 50%;
border: 2px solid #123;
border-radius: 10px;
background-color: rgba(255,255,255, 0.5)
}
.row .sobre h1 {
display: block;
margin- auto;
margin-top: 50%;
margin-left: 50%;
text-align: center;
transform: translateX(-50%)
}
<header>
<h1>header</h1>
</header>
<div id="video-container" class="row no-margin no-padding">
<video autoplay loop muted>
<source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
</video>
<div class="sobre">
<h1>Sobre el vídeo</h1>
</div>
</div>
<footer>
<h1>footer</h1>
</footer>