Video background

Video background
Video background
HTML Descargar
HTML Video Descargar

Explicamos como insertar un video como fondo de una capa, como ajustamos las medidas del video para adaptarlo a la medida de la ventana o a una altura justa y vemos también como podemos alinear sus contenidos.

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

Descargar snippet

Si te ha sido útil este snippet, te agradecería dejases un comentario, mas abajo. Gracias

Compartir
Snippets relacionados
Imagen background
Imagen background
Background opacidad
Background opacidad
Gráficos SVG para Web
Gráficos SVG para Web
Icono menú animado
Icono menú animado

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *