Video de fondo para sitio web (HTML5)
Indica la dirección del video (MP4 o WebM) y de la imagen de portada. El código ya viene con los atributos que los navegadores exigen para reproducirse solo.
Cómo usarVideo corriendo de fondo en la parte superior
Disponible en: 
Video de fondo para sitio web (HTML5): para qué sirve
Un video corto corriendo de fondo en la parte superior del sitio muestra el ambiente, el producto o el servicio desde el primer momento. Para funcionar en el celular, el video debe estar sin sonido y tener los atributos muted, autoplay y playsinline.
El generador arma la sección con la etiqueta video en MP4 y WebM, imagen de portada, capa oscura ajustable para que el texto se lea bien, título y texto, y un botón de pausa, como pide la WCAG para contenido que se mueve por más de 5 segundos. Para quien pidió menos movimiento, el video ya comienza en pausa.
Cómo usar
- Indica las direcciones del video y de la imagen de portada.
- Escribe el título y el texto y ajusta la capa oscura.
- Copia el código y pégalo en la parte superior de la página.
Cuándo usar
- Parte superior de un sitio de restaurante u hotel.
- Landing page de evento.
- Página de inmobiliaria o gimnasio.
Preguntas frecuentes
¿Por qué el video no se reproduce solo en el celular?
Los navegadores solo dejan reproducir solos los videos sin sonido. El video necesita los atributos muted, autoplay y, en el iPhone, playsinline; si no, se abre en pantalla completa o no se reproduce. El código ya trae los tres.
¿Qué tamaño de archivo usar?
El video de fondo debe ser corto (10 a 20 segundos en loop) y ligero, de preferencia menos de 3 a 5 MB, en 720p o 1080p sin audio. Comprímelo antes de publicar; un video pesado retrasa la carga en el celular.
¿Y quien prefiere menos movimiento?
Para quien activó la reducción de movimiento en el sistema, el script pausa el video y queda solo la imagen de portada. También hay un botón de pausa, que la WCAG pide para contenido que se mueve por más de 5 segundos.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.