Anteriormente ya publicamos el snippet Imagen background, que es lo mismo que este snippet pero con una imagen. Te recomiendo visites la página y le eches un vistazo, pulsando aquí.
En este snippet damos dos ejemplos para utilizar un video como fondo de una capa y como alinear los contenidos que se ven encima. El primero con la ayuda de un script en jQuery ajustamos el video para que se adapte a las medidas de la ventana del navegador en cualquier medida de pantalla y alinea sus contenidos. El segundo hace lo mismo pero adapta el video a una altura de capa concreta y no requiere ningún script.
Opciones insertar video background
Altura dinámica
En este snippet vamos a cargar un video en el fondo de un div, ajustando este a las medidas de la ventana del navegador donde es vista la página, este ajuste de las medidas se calcula con la ayuda de script en jQuery y se vuelca dinamicamente a la clase current-height.
Los contenidos que se ven por encima, podemos alinearlos tanto horizontal como vertical, con clases de estilo CSS.
Veamos el markup, de video background para una altura dinámica.
HTML
<div class="bg-video-wrapper current-height">
<div class="bg-video-container">
<video class="bg-video" autoplay loop poster="https://www.smoothemes.es/media/tunnel/tunnel_animation.jpg">
<source src="https://www.smoothemes.es/media/tunnel/tunnel_animation.mp4" type="video/mp4" />
<source src="https://www.smoothemes.es/media/tunnel/tunnel_animation.webm" type="video/webm" />
<source src="https://www.smoothemes.es/media/tunnel/tunnel_animation.ogg" type="video/ogg" />
</video>
</div>
<div class="content-wrap current-height">
<div class="content-box">
<h1 class="title">Video background full window</h1>
<p class="paragraph">Ajusta perfectamente un background de video a la ventana y posiciona los contenidos.</p>
</div>
</div>
</div>
Los estilos colocan el video en el fondo de la capa wrapper y la clase current-height, recibe del script los datos dinamicos, ancho y alto de la ventana, que por tanto reajusta el video a tales medidas dinamicas. A la capa wrapper le corregimos el error del margin left, de un pixel.
Para alinear los contenidos que están por encima, la alineación horizontal con un text-align se resuelve facilmente y para la vertical utilizo las propiedades de display table y table-cell con un vertical-align. En este caso el alineado vertical utilize este método pero yo recomiendo cargarte el Bootstrap 4 y utilizar el grid con la alineación de flex.
Estos son los estilos aportados.
CSS
body {
font-family: sans-serif;
margin: 0;
}
.bg-video-wrapper {
position: relative;
margin: 0 0 0 -1px;
padding: 0;
height: 100%;
z-index: auto;
}
.bg-video-container {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.bg-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.content-wrap {
display: table;
margin: 0;
padding: 0 20px;
}
@media (min-width: 576px) { .content-wrap { padding: 0 40px; } }
@media (min-width: 768px) { .content-wrap { padding: 0 60px; } }
@media (min-width: 992px) { .content-wrap { padding: 0 100px; } }
@media (min-width: 1200px) { .content-wrap { padding: 0 120px; } }
.content-box {
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
}
.title {
font-size: 40px;
margin: 0 0 20px 0;
padding: 0;
color: #5680cf;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
opacity: 0;
}
@media (min-width: 576px) { .title { font-size: 50px; } }
.paragraph {
font-size: 18px;
margin: 0;
padding: 0;
color: #e4da3a;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
opacity: 0;
}
.bg-video,
.title,
.paragraph {
-webkit-transition: opacity 2.0s ease-in-out;
-moz-transition: opacity 2.0s ease-in-out;
-ms-transition: opacity 2.0s ease-in-out;
-o-transition: opacity 2.0s ease-in-out;
transition: opacity 2.0s ease-in-out;
}
@media (min-width: 576px) { .paragraph { font-size: 20px; } }
.loaded .bg-video,
.loaded .title,
.loaded .paragraph {
opacity: 1;
}
Este script se encarga de calcular la altura actual de la ventana y corrige las medidas del video, aparte añade una clase a la etiqueta body, cuando la página este cargada. Recuerda incluir antes la librería de jQuery.
jQuery
function calculateHeight() {
var currentHeight = $(window).height();
$('.current-height').css({'height':currentHeight+'px'});
}
calculateHeight();
window.addEventListener('load', function() {
$('body').addClass('loaded');
calculateHeight();
});
window.addEventListener('resize', function() {
calculateHeight();
});
Se puede ver como funciona el ejemplo en CodePen.
See the Pen Video background full window by Smoothemes (@smoothemes) on CodePen.0
Altura ajustable
En este otro snippet vamos a cargar un video en el fondo de un div y la altura de esta capa dependerá si se le quiere dar una altura justa o que los mismos contenidos le den su propia altura, con sus paddings y márgenes. Para este ejemplo no utilizamos jQuery, pero, utilizamos un pequeño script para cargar el video cuando se carga la página.
Para la alineación de los contenidos utilizamos los mismos casos que lo explicado arriba, son estilos sencillos con CSS
Veamos el markup, del video background, para una altura ajustable.
HTML
<div class="bg-video-wrapper">
<div class="bg-video-container">
<video class="bg-video" autoplay loop poster="https://www.smoothemes.es/media/street-night/street-night.jpg">
<source src="https://www.smoothemes.es/media/street-night/street-night.mp4" type="video/mp4" />
<source src="https://www.smoothemes.es/media/street-night/street-night.webm" type="video/webm" />
<source src="https://www.smoothemes.es/media/street-night/street-night.ogg" type="video/ogg" />
</video>
</div>
<div class="content-wrap">
<div class="content-box">
<h1 class="title">Video background height</h1>
<p class="paragraph">Ajusta perfectamente un background de video a una altura y posiciona los contenidos.</p>
</div>
</div>
</div>
Estos son los estilos, la explicación extendida la puedes ver arriba.
CSS
body {
font-family: sans-serif;
margin: 0;
}
.bg-video-wrapper {
position: relative;
margin: 0 0 0 -1px;
padding: 0;
height: 100%;
z-index: auto;
}
.bg-video-container {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.bg-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.content-wrap {
display: table;
margin: 0;
padding: 160px 20px;
}
@media (min-width: 576px) { .content-wrap { padding: 140px 40px; } }
@media (min-width: 768px) { .content-wrap { padding: 200px 60px; } }
@media (min-width: 992px) { .content-wrap { padding: 200px 100px; } }
@media (min-width: 1200px) { .content-wrap { padding: 200px 120px; } }
.content-box {
margin: 0;
padding: 0;
display: table-cell;
vertical-align: middle;
}
.title {
font-size: 40px;
margin: 0 0 20px 0;
padding: 0;
color: #5680cf;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.9);
opacity: 0;
}
@media (min-width: 576px) { .title { font-size: 50px; } }
.paragraph {
font-size: 18px;
margin: 0;
padding: 0;
color: #e4da3a;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
opacity: 0;
}
.bg-video,
.title,
.paragraph {
-webkit-transition: opacity 2.0s ease-in-out;
-moz-transition: opacity 2.0s ease-in-out;
-ms-transition: opacity 2.0s ease-in-out;
-o-transition: opacity 2.0s ease-in-out;
transition: opacity 2.0s ease-in-out;
}
@media (min-width: 576px) { .paragraph { font-size: 20px; } }
.loaded .bg-video,
.loaded .title,
.loaded .paragraph {
opacity: 1;
}
Este script se encarga de añadir una clase a la etiqueta body, cuando la página este cargada. Recuerda incluir antes la librería de jQuery.
jQuery
window.addEventListener('load', function() {
$('body').addClass('loaded');
});
Se puede ver como funciona el ejemplo en CodePen.
See the Pen Video background height by Smoothemes (@smoothemes) on CodePen.0
Si te ha sido útil este snippet, te agradecería dejases un comentario, mas abajo. Gracias