≡En resumen
- Un video website usa el vídeo como pieza central: de fondo, como galería o como producto.
- El vídeo de fondo debe ir silenciado, ser corto y ligero, tener imagen de portada y un botón de pausa.
- Los vídeos largos no se alojan como archivo en tu hosting: se sirven con streaming o desde una plataforma de vídeo.
- Para que Google indexe un vídeo, necesita una página propia donde sea el contenido principal y datos estructurados VideoObject.
- Si el vídeo retrasa la carga o tapa el mensaje, resta más de lo que suma.
01 ¿Qué es un video website?
El término se usa para realidades distintas: desde una web corporativa que abre con un vídeo, hasta una plataforma de cursos o una videoteca. Lo común a todas es que el vídeo condiciona el diseño, el rendimiento, el alojamiento y el SEO de la web, y hay que planificarlo desde el principio.
02 Tipos de webs con vídeo
Web con vídeo de fondo
Un clip en bucle y sin sonido en la cabecera que transmite ambiente: hoteles, restaurantes, eventos, inmobiliarias.
Portfolio audiovisual
Productoras, fotógrafos, agencias y creadores que muestran sus trabajos en vídeo.
Videoteca o galería
Colección de vídeos organizada por temas: medios, formación, centros de ayuda.
Plataforma de vídeo o cursos
El vídeo es el producto: academias online, suscripciones, eventos grabados.
Landing con vídeo
Una página de conversión en la que un vídeo explica la oferta junto al formulario.
Tienda con vídeos de producto
Fichas que muestran el producto en uso, montaje o tallas en movimiento.
Si tu caso es una sola página de captación, la entrada de video landing page profundiza en cómo colocar el vídeo para convertir.
03 Vídeo de fondo: cómo hacerlo bien
El vídeo de fondo es el recurso más visible de un video website y el que más problemas da. Los navegadores solo reproducen automáticamente un vídeo si está silenciado: la política de Chrome, vigente desde Chrome 66 en abril de 2018, permite siempre el autoplay sin sonido y limita el que tiene audio a casos en que el usuario ya ha interactuado con la web. En iPhone, además, el vídeo necesita el atributo playsinline para reproducirse dentro de la página.
- ✓Atributos básicos del elemento video: autoplay, muted, loop, playsinline y poster con la imagen de portada.
- ✓Clip corto, de 10 a 20 segundos, sin cortes bruscos en el bucle.
- ✓Peso reducido: sin audio, resolución ajustada al tamaño real y buena compresión.
- ✓Imagen de portada ligera, que se ve mientras carga o si el vídeo falla.
- ✓Botón visible para pausar el vídeo.
- ✓Respetar la preferencia de movimiento reducido del sistema (prefers-reduced-motion) mostrando solo la imagen.
- ✓Texto encima con contraste suficiente, con una capa oscura o clara sobre el vídeo.
04 Rendimiento: que el vídeo no haga lenta la web
El vídeo es el recurso más pesado de una página. En las Core Web Vitals, un elemento video puede ser el Largest Contentful Paint (LCP): se toma el momento en que carga la imagen de portada o se muestra el primer fotograma, lo que ocurra antes. Google recomienda un LCP de 2,5 segundos o menos.
| Situación | Qué hacer |
|---|---|
| Vídeo de fondo en la cabecera | Portada ligera en WebP o AVIF como LCP y vídeo corto y comprimido |
| Vídeos más abajo en la página | No precargarlos (preload="none") y cargarlos al acercarse a la vista |
| Vídeos incrustados de YouTube o Vimeo | Mostrar una miniatura y cargar el reproductor al hacer clic (fachada) |
| Vídeos largos o muchos vídeos | Servirlos con streaming adaptativo desde una plataforma o una CDN, no desde el hosting |
| Móvil | Versiones de menor resolución o solo la imagen de portada |
Para vídeos largos, el video streaming con bitrate adaptativo evita que un visitante con mala conexión descargue un archivo enorme. Si tu web ya tiene problemas de carga por culpa del vídeo, la optimización de la velocidad de carga web suele empezar por ahí.
05 Galerías y videotecas: estructura recomendada
-
1
Una página por vídeo
Con título, descripción y URL propios. Es lo que Google necesita para indexar cada vídeo.
-
2
Listados con miniaturas
Las páginas de categoría muestran miniaturas y títulos que enlazan a cada página de vídeo, sin cargar todos los reproductores.
-
3
Filtros y búsqueda
Por tema, sector, fecha o duración, según cómo busque tu público.
-
4
Contexto alrededor
Transcripción, capítulos, vídeos relacionados y una llamada a la acción clara.
-
5
Alojamiento adecuado
Plataforma pública, plataforma de vídeo profesional o streaming propio según privacidad, coste y control.
06 SEO del vídeo: páginas de visualización y datos estructurados
Google indexa vídeos que están en una página de visualización: una página cuyo propósito principal es mostrar ese vídeo. Un vídeo de fondo o un vídeo secundario dentro de un artículo o una ficha de producto no se trata igual. Para ayudar a Google a entender cada vídeo se usan datos estructurados con schema markup del tipo VideoObject.
| Propiedad | Obligatoria o recomendada | Qué indica |
|---|---|---|
| name | Obligatoria | Título del vídeo |
| thumbnailUrl | Obligatoria | URL de la miniatura, única para cada vídeo |
| uploadDate | Obligatoria | Fecha y hora de la primera publicación |
| description | Recomendada | Descripción del vídeo |
| contentUrl o embedUrl | Recomendada | URL del archivo de vídeo o del reproductor |
| duration | Recomendada | Duración en formato ISO 8601, por ejemplo PT1M30S |
| Clip o SeekToAction | Opcional | Momentos clave o capítulos que Google puede mostrar en los resultados |
07 Cuándo merece la pena una web centrada en vídeo
| Encaja | No encaja |
|---|---|
| Productos o servicios que se entienden mejor viéndolos: turismo, inmobiliaria, formación, producción audiovisual | Webs en las que el visitante busca datos rápidos: horarios, precios, trámites |
| Marcas con material audiovisual propio y de calidad | Vídeos de stock genéricos que no dicen nada de tu negocio |
| Proyectos con presupuesto para alojar y mantener el vídeo | Webs alojadas en un hosting básico sin CDN ni plan de rendimiento |
Si no tienes vídeos propios para empezar, los bancos de vídeos gratis en HD y 4K sirven para un primer vídeo de fondo, aunque lo ideal es mostrar tu negocio real. Integrar todo esto con criterio de rendimiento, accesibilidad y conversión es trabajo de un diseño web a medida, no de una plantilla con un vídeo encima.
Preguntas frecuentes sobre Video Website
Es un sitio web en el que el vídeo es un elemento central de la experiencia: como fondo de la portada, como galería o videoteca, o como producto en plataformas de cursos.
Porque los navegadores bloquean el autoplay con sonido. Añade los atributos muted y playsinline al vídeo: el autoplay silenciado siempre está permitido en Chrome.
Puede hacerlo. Usa un clip corto y comprimido, sin audio, con una imagen de portada ligera, y valora mostrar solo la imagen en móvil.
Para clips cortos de fondo, tu hosting sirve. Para vídeos largos o muchos vídeos, mejor una plataforma de vídeo o streaming con CDN, cargando el reproductor solo cuando se necesita.
Dedica una página a cada vídeo, en la que sea el contenido principal, añade datos estructurados VideoObject con name, thumbnailUrl y uploadDate y, si tienes muchos, un sitemap de vídeo.
El criterio 2.2.2 de WCAG exige poder pausar, detener u ocultar cualquier contenido en movimiento que empiece solo y dure más de cinco segundos.
El video website es un sitio completo organizado alrededor del vídeo; la video landing page es una sola página de conversión que usa un vídeo para explicar una oferta.
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 ↗