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 líneas de código lo tenemos listo. Somos expertos en el diseño de páginas web en valencia
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"/>Y aquí el código css que posicionará el vídeo en el fondo de pantalla y hará que sea fullscreen.
<source src="/url/tuvideo.mp4" type="video/mp4" />
</video/>
#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 experta en diseño web en Valencia.