Para insertar un vídeo de fondo a pantalla completa, utiliza la etiqueta HTML5 <video> con los atributos autoplay y loop. Luego, aplica propiedades CSS (position: absolute, min-width: 100% y z-index: -1000) para fijarlo detrás de todo el contenido de la web.
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;
}
¿Qué formatos de vídeo soporta la etiqueta HTML5?
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 los formatos están soportados por todos los navegadores web por igual, por lo que la correcta selección del formato y su declaración es crítica. Los atributos correspondientes que debes incluir en la etiqueta <source> son:
- type=»video/mp4″
- type=»video/ogg»
- type=»video/webm»
En Doowebs implementamos soluciones de desarrollo web en Valencia. Si necesitas implementar funcionalidades visuales avanzadas o programar un proyecto a medida, ¡contáctanos!