≡En resumen
- El vídeo es una pieza de contenido con una tarea concreta, no un adorno: si no la tiene, sobra.
- Colócalo según la jerarquía de la página: nunca debe competir con el titular ni con la llamada a la acción.
- Subtítulos, control de pausa y nada de sonido automático son requisitos de accesibilidad, no extras.
- Fija un presupuesto de rendimiento: póster ligero, carga diferida fuera de pantalla y fachada para los reproductores de terceros.
- Diseña para verse sin sonido y en móvil, con la proporción adecuada a cada bloque.
01 ¿Qué es el video website design?
No hay que confundirlo con una web centrada en vídeo, es decir, un sitio cuyo producto principal son los vídeos (una plataforma de cursos, un canal de noticias). Aquí hablamos de reglas de diseño aplicables a cualquier web corporativa, tienda o landing que incorpore uno o varios vídeos. El término en inglés procede de las agencias anglosajonas; en España se habla simplemente de «diseño web con vídeo».
02 Cuándo usar vídeo en una web y cuándo no
| Página | Vídeo que funciona | Tarea que cumple |
|---|---|---|
| Home | Presentación de 30-90 s o clip ambiental sin sonido | Explicar qué haces o transmitir la marca en segundos |
| Página de servicio | Cómo trabajáis, paso a paso | Reducir la incertidumbre antes de pedir presupuesto |
| Ficha de producto | Demostración del producto en uso | Mostrar tamaño, textura y funcionamiento que la foto no enseña |
| Landing de campaña | Vídeo explicativo o testimonio | Resolver objeciones cerca del formulario |
| Sobre nosotros | Equipo e instalaciones | Generar confianza con caras reales |
| Centro de ayuda | Tutoriales cortos | Resolver dudas sin abrir una incidencia |
03 Layout y jerarquía visual: dónde colocar el vídeo
Vídeo hero
Ocupa la cabecera. Solo tiene sentido si el titular y la llamada a la acción siguen legibles encima o al lado; si el vídeo tapa el mensaje, rompe la jerarquía.
Vídeo junto al texto
Formato a dos columnas: texto y botón a un lado, vídeo al otro. Es el más equilibrado para páginas de servicio y funciona bien apilado en móvil.
Vídeo en la mitad de la página
Tras el primer bloque de beneficios, como prueba o explicación. Recibe menos reproducciones, pero de usuarios más interesados.
Vídeo de fondo
Ambiental, sin sonido y en bucle. Aporta atmósfera, no información: nunca pongas en él datos que el usuario necesite leer.
Galería o lista de vídeos
Miniaturas con título y duración visibles; el reproductor se abre al pulsar. Útil en centros de ayuda y casos de éxito.
Tres reglas de jerarquía: el titular se lee antes que el vídeo; el botón principal nunca queda debajo del reproductor en la primera pantalla del móvil; y cada página tiene un solo vídeo protagonista. Si quieres profundizar en el vídeo ambiental, la entrada sobre el vídeo de fondo detalla cómo implementarlo sin castigar la carga.
04 Formato, proporción y controles del reproductor
| Bloque | Proporción | Motivo |
|---|---|---|
| Cabecera en escritorio | 16:9 o más panorámico recortado | Llena el ancho sin empujar el contenido hacia abajo |
| Cabecera en móvil | Vertical (9:16) o cuadrado (1:1) | Aprovecha la pantalla vertical; sirve una versión distinta a la de escritorio |
| Vídeo explicativo | 16:9 | Formato natural de grabación y de YouTube |
| Testimonios y clips de redes | 9:16 o 4:5 | Reutiliza piezas grabadas para Reels o Shorts |
- ✓Reserva el espacio del vídeo con su proporción (aspect-ratio en CSS) para evitar saltos de maquetación.
- ✓Muestra una imagen de portada (poster) que explique el contenido, no un fotograma negro.
- ✓Indica la duración junto al botón de reproducir: «1:12» invita más que un vídeo sin pista.
- ✓Usa controles nativos o accesibles por teclado; nunca ocultes el botón de pausa.
- ✓Ofrece pantalla completa en vídeos explicativos y desactívala en vídeos ambientales.
- ✓En iOS, un vídeo en línea necesita el atributo playsinline para no abrirse a pantalla completa.
05 Accesibilidad: WCAG 1.2.x, 1.4.2 y 2.2.2
| Criterio | Nivel | Qué exige en la práctica |
|---|---|---|
| 1.2.1 Solo audio y solo vídeo (pregrabado) | A | Alternativa textual para vídeos sin sonido que transmiten información |
| 1.2.2 Subtítulos (pregrabado) | A | Subtítulos sincronizados en todo vídeo con audio |
| 1.2.3 Audiodescripción o alternativa (pregrabado) | A | Audiodescripción o transcripción completa de lo que se ve |
| 1.2.4 Subtítulos (en directo) | AA | Subtítulos en emisiones en directo |
| 1.2.5 Audiodescripción (pregrabado) | AA | Audiodescripción de la información visual relevante |
| 1.4.2 Control del audio | A | Si suena solo más de 3 segundos, botón para pararlo o control de volumen |
| 2.2.2 Pausar, detener, ocultar | A | Todo movimiento automático de más de 5 segundos debe poder pausarse, detenerse u ocultarse |
06 Presupuesto de rendimiento: vídeo sin frenar la web
El vídeo es el recurso más pesado de una página, así que conviene fijar un presupuesto de rendimiento antes de diseñar: cuánto puede pesar la primera pantalla y qué se carga solo cuando el usuario lo pide. Según web.dev, un elemento <video> puede ser el Largest Contentful Paint (LCP) de la página y se mide con el póster o con el primer fotograma, lo que ocurra antes; el objetivo es un LCP de 2,5 segundos o menos en el percentil 75 de las visitas.
-
1
Póster optimizado
Imagen de portada en WebP o AVIF, con el tamaño exacto del bloque. Si el vídeo está en la primera pantalla, esa imagen suele decidir tu LCP.
-
2
Nada de autoplay con sonido
Chrome solo permite siempre la reproducción automática sin sonido. Un vídeo ambiental va con muted, loop y playsinline; uno informativo espera al clic.
-
3
Precarga mínima
Usa preload="none" o preload="metadata" en vídeos que no se ven al cargar, para no descargar megas que quizá nadie reproduzca.
-
4
Carga diferida
Los vídeos por debajo de la primera pantalla se cargan cuando el usuario se acerca a ellos.
-
5
Fachada para YouTube o Vimeo
Muestra una miniatura con botón de play y carga el reproductor del tercero solo al pulsar: Lighthouse recomienda este patrón porque cada embebido arrastra scripts pesados.
-
6
Versiones por dispositivo
Sirve un archivo más ligero y vertical en móvil, y comprueba el resultado con datos de campo, no solo en tu ordenador.
Los detalles de códecs, bitrate y streaming adaptativo están en la entrada de optimización técnica del vídeo. Si tu web ya va lenta, en nuestro servicio para mejorar la velocidad web medimos el impacto real de cada vídeo en las Core Web Vitals.
07 Errores frecuentes y checklist de diseño web con vídeo
| Error | Consecuencia | Solución |
|---|---|---|
| Vídeo de fondo con texto importante encima y poco contraste | Mensaje ilegible en algunos fotogramas | Capa oscura bajo el texto o texto fuera del vídeo |
| Autoplay con sonido | El navegador lo bloquea o el usuario abandona | Sin sonido por defecto y botón para activarlo |
| Tres vídeos en la misma pantalla | Nadie sabe cuál ver y la página pesa el triple | Un vídeo protagonista por página |
| Vídeo sin subtítulos | Incumple WCAG 1.2.2 y no se entiende en silencio | Subtítulos WebVTT revisados a mano |
| Embebido de YouTube cargado al abrir la página | Scripts de terceros que retrasan la interacción | Fachada con miniatura y carga al pulsar |
Una academia tenía un vídeo de fondo de 12 MB con el titular encima. El rediseño lo sustituyó por un titular claro con botón, una imagen ligera y, al lado, un vídeo de 70 segundos con portada, duración visible y subtítulos que se carga al pulsar. La primera pantalla pasó a pesar una fracción de lo anterior y el mensaje dejó de depender del fotograma que tocara. Para páginas de campaña, la misma lógica se aplica a una landing page con vídeo.
En un proyecto de diseño web profesional, el vídeo se decide en el wireframe, no al final: qué tarea cumple, en qué bloque va y cuánto puede pesar. Si además quieres validar con usuarios dónde miran y qué reproducen, nuestro equipo de diseño UX/UI lo prueba con prototipos antes de producir el vídeo.
Preguntas frecuentes sobre Video Website Design
Es el diseño de la integración del vídeo en una web: qué tarea cumple, dónde se coloca, con qué formato y controles, cómo se hace accesible y cuánto puede pesar sin frenar la página.
Sí, si explica algo que el texto no consigue y no tapa el titular ni el botón principal. Si solo decora, suele ser mejor una imagen ligera y un vídeo más abajo que se cargue al pulsar.
Solo si no suena o, si suena más de 3 segundos, ofrece un control para pararlo o bajar el volumen (WCAG 1.4.2); y, si se mueve más de 5 segundos, un control para pausarlo, detenerlo u ocultarlo (WCAG 2.2.2).
Sí. WCAG 2.2 exige subtítulos para todo vídeo pregrabado con audio (criterio 1.2.2, nivel A), y además permiten entenderlo sin sonido, que es como se ve gran parte del vídeo en móvil.
Puede afectar mucho: el vídeo puede ser el elemento LCP y los reproductores de terceros añaden scripts. Con póster optimizado, carga diferida y fachada, el impacto se reduce al mínimo.
Para vídeos ambientales cortos, un archivo propio ligero; para vídeos largos o explicativos, una plataforma de vídeo con streaming adaptativo, insertada con fachada para no cargarla hasta que el usuario pulse.
El video website design son las reglas para integrar vídeo en cualquier web; un video website es un sitio cuyo contenido principal son los propios vídeos.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗