Cómo poner un video de producto en tu landing page (autoplay, peso y posición)
Un video de producto arriba en la landing page enseña lo que haces antes de que nadie lea una palabra. Para que se reproduzca solo en todas partes sin ralentizar la página hacen falta unas pocas decisiones concretas.
Elige el formato
| Formato | Ideal para |
|---|---|
| Bucle silenciado en la cabecera | Un video animado de 15 a 30 segundos, sin sonido ni controles. |
| Póster con botón de play | Una demo de uno a dos minutos con locución, donde el sonido importa. |
| Ambos | El bucle arriba y la demo narrada más abajo. |
Las reglas de reproducción automática
Chrome lo resume así: "Muted autoplay is always allowed", mientras que la reproducción con sonido necesita condiciones como una interacción previa con la web (Chrome for Developers). MDN describe la misma regla en todos los navegadores y señala que Safari además necesita el atributo playsinline (MDN Web Docs). Así que el bucle debe ser muted y playsinline, y un video con sonido debe esperar a un clic.
El código
<video src="/producto.mp4" poster="/producto.jpg"
autoplay muted loop playsinline preload="metadata"></video>El póster aparece al instante mientras carga el video, y preload="metadata" evita que se descargue el archivo entero antes de tiempo.
Que pese poco
- Video, no GIF. En el ejemplo de web.dev, un GIF de 3,7 MB pasó a ser un MP4 de 551 KB y un WebM de 341 KB (web.dev).
- Quita la pista de audio y escala. Con ffmpeg, algo como
ffmpeg -i video.mp4 -an -vf scale=1280:-2 -c:v libx264 -crf 26 -preset slow -movflags +faststart hero.mp4. - Para videos largos con sonido, usa un servicio como Wistia, Vimeo o YouTube.
Posición y duración
- El titular sigue visible; el video lo acompaña, no lo empuja hacia abajo.
- Formato 16:9, sin cortar nada importante en el móvil.
- Corto: por debajo del minuto la interacción es la más alta según Wistia (Wistia).
¿Aún no tienes video? Teasr crea a partir de tu landing page un MP4 de 1920 x 1080 en unos 10 minutos, con tu marca y tus pantallas reales, desde 19,50 €. La música la quitas para el bucle con el comando de arriba.