Insertar video como background o fondo en tu página web con Html5 fullscreen

video-html5

Hoy en día tenemos muy de moda el poder insertar vídeos como fondo en vez de una imagen, pues bien aquí os dejo como hacerlo es muy sencillo solamente debemos preocuparnos de tener los tags de HTML5 y simplemente con estas lineas de código lo tenemos listo.

Aquí el código html5 que nos ayudará a insertar el vídeo.

<video autoplay="autoplay" loop="loop" id="video_background" preload="auto" volume="50"/>
  <source src="/url/tuvideo.mp4" type="video/mp4" />
</video/>
Y aquí el código css que posicionará el vídeo en el fondo de pantalla y hará que sea fullscreen.

#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
#video_pattern {
background:#fff;
position: fixed;
opacity: 0.8;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}

Los formatos de vídeo que podéis usar dentro de la etiqueta de html5 de <video> son:

  • WebM
  • VP8
  • Vorbis
  • Ogg
  • Theora
  • Vorbis
  • MP4
  • H.264
  • MP3
  • AAC

No todos están soportados por todos los navegadores, por lo que es importante la selección de la extensión del formato de vídeo.

Recordad que si la extensión debe ir especificada dentro del atributo type. Ejemplos:

  • type=»video/mp4″
  • type=»video/ogg»
  • type=»video/webm»

Si necesitas ayuda con tu web, en Doowebs somos una empresa valenciana experta en el desarrollo web.

Llamar a Doowebs Teléfono de Doowebs 653836347