Video de fondo con HTML y CSS

Video de fondo con HTML y CSS

Video de fondo con HTML y CSS
5 (100%) 1 voto

En este pequeño tutorial te muestro como realizar el efecto de video de fondo con HTML y CSS para que lo utilices en tus proyectos web, perfecto para pantallas con poco contenido como pantallas de inicio de sesión, te muestro el codigo fuente en HTML y CSS.

Muchas veces en nuestros proyectos web tenemos pantallas con poco contenido donde se necesita un poco más de vida o movimiento.

Estas pantallas con poco contenido son perfectas para añadir un efecto de background con video, este fondo de video agrega un poco más de movimiento a estas paginas sencillas y por supuesto nos da un poco más de profesionalismo y diseño.

Por cierto, ¿Sabes como hacer animaciones con CSS?


¿Sabías que?

¿Necesitas hospedaje web? DigitalServer te ofrece un 50% de descuento en cualquier plan de hosting a partir del plan Micro! Solo copia el cupon: PROMOEXH y sigue el siguiente enlace:

Obtener 50% de descuento

Elemento video con HTML

Para hacer este efecto de video de fondo con HTML y CSS lo primero que necesitamos es añadir nuestro codigo HTML.

Como puedes ver es un componente video dentro de un div contenedor, cada uno con su determinada clase lo cual nos permitirá darle un estilo definido y deseado en este efecto.

El video en este caso esta en formato mp4 y ogg.

Ahora lo siguiente será darle el estilo deseado de video de fondo.

Estilo del video background con CSS

Para darle el estilo que lo convertirá en video de fondo necesitamos hacerlo full width, darle un z-index de -100 para que se coloque por detrás de cualquier elemento y por ultimo definir unas reglas para que se visualize correctamente.

Ahora con esto ya podemos apreciar nuestro video de fondo con HTML y CSS.

¿Necesitas videos libre de derechos?

Simple! Solo ve a https://pixabay.com y navega a sección de videos, escribe lo que estas buscando en el buscador y listo!

Encontrarás gran cantidad de videos libres de derechos listos para utilizar en tus proyectos web.

Si este pequeño post te fue de utilidad no olvides compartirlo en tus redes sociales o dejarnos un comentario para ayudarte.

Hasta luego!

Video de fondo con HTML y CSS
5 (100%) 1 voto

Dejar un comentario

avatar
  Subscribe  
Notify of