Cómo poner un vídeo de fondo en HTML

Publicado el 4 marzo, 2022 por Víctor Sánchez.  / 1 Comentario

Si quieres saber cómo poner un vídeo de fondo HTML, en la entrada de hoy te enseño hacerlo en tu web. También verás cómo centrar un vídeo de fondo en HTML y otros trucos. ¡Comenzamos!

A pesar de que las páginas web actuales son cada vez más rápidos, estéticas y sobre todo responsive, la realidad es que en ocasiones, por buscar este rendimiento en las páginas web, el diseño se ve sacrificado y quedan unos diseños demasiado planos y poco atractivos. Es por ello que para un proyecto en concreto, puedes decidir sacrificar un poco de rendimiento (poco si se hace correctamente) y darle un toque como diríamos en nuestro estudio. Ese «toque» puede ser perfectamente agregar un vídeo de fondo HTML en tu web, o en una sección de la misma.

La realidad es que añadir este recurso visual, es una tarea sencilla de ejecutar y que bien realizada, dará ese punto extra de personalidad a tu sitio web.

Antes de avanzar y enseñarte como añadir un vídeo HTML de fondo a una página web, vamos a repasar como se debe añadir a una página web

Cómo añadir un vídeo HTML

Para añadir un vídeo HTML a una página web, tienes que usar la etiqueta HTML <video> para la apertura, y </video> para el cierre. Dentro de esta etiqueta, debes poner la URL y el formato del recurso usando los atributos HTML src y type.

Además, es recomendable subir varias versiones del vídeo a reproducir por si el navegador que use el visitante de tu web, no fuera capaz de reproducir alguno de los formatos. A continuación se muestra un ejemplo de cómo añadir un vídeo HTML a una web.

<video>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
   Tu navegador no soporta el formato de video
</video>

Para esta etiqueta de vídeo existen muchos atributos que te aconsejo probar para encontrar el resultado buscado en tu sitio web. Podrás encontrar todos los atributos HTML en este enlace.

Una vez que ya hemos refrescado cómo añadir un vídeo en una página web, pasemos a jugar con este recurso, y veamos cómo añadirlo en el fondo de la página web.

Cómo poner vídeo de fondo en HTML

Bien, vamos a ver como añadir un vídeo de fondo. Lo primero que tenemos que tener claro, es donde queremos ponerlo y que comportamiento tendrá. Es decir, ¿será un vídeo que este «fijo» en el fondo mientras el scroll de la página sigue en movimiento? Un ejemplo: Caronte Web Studio. O si, por el contrario, lo que buscas es que sea un vídeo de fondo en una sección de la página: DFSK Arregui

Veamos ambos ejemplos como podemos realizarlos:

Añadir vídeo HTML en una sección

See the Pen Untitled by Alberto (@carontestudio) on CodePen.

Añadir vídeo HTML fijo

Ahora vamos a ver como añadir el vídeo al fondo de la página, para que mientras vayas bajando la pantalla, la grabación se mantenga fija y pueda verde durante todo el tiempo:

See the Pen Untitled by Alberto (@carontestudio) on CodePen.

Añadir vídeo HTML centrado y ocupando toda la pantalla.

Al igual que con las imágenes, también podrás añadir un vídeo de fondo que ocupe toda la pantalla y que esté siempre centrado en la pantalla, independientemente del ancho del dispositivo. Por ello, lo más destacado de este ejemplo, es que vamos a centrar el video HMTL en el sitio web, para que se vea siempre la parte central del vídeo, manteniendo el 100% de la altura del dispositivo, y lo que se «pierda» y no se vea sean los extremos.

See the Pen Untitled by Alberto (@carontestudio) on CodePen.

Conclusión

Cómo has podido comprobar, añadir un vídeo de fondo a tu página web es una tarea realmente sencilla. De todas formas, hay muchas otras formas de aprovechar este elemento en un sitio web, tan sólo necesitas hacer volar tu creatividad, y aprovechar correctamente todo lo que CSS puede aportarte. Si tienes alguna duda, y crees que puedo ayudarte, déjame un comentario y trataré de ayudarte lo antes posible.

Espero que este artículo te haya gustado. Si es así, déjame también un comentario y comparte esta entrada con quien creas que pueda necesitarlo esta información.

¡Hasta la próxima!