Skip to main content
Validación HTML

Valor incorrecto “” para el atributo “poster” en el elemento “video”: Debe ser no vacío.

Acerca de este problema HTML

El atributo poster le dice al navegador qué imagen mostrar como marco de vista previa antes de que el usuario reproduzca el vídeo. Según el WHATWG HTML Living Standard, el valor del atributo poster debe ser una URL válida no vacía potencialmente rodeada por espacios. Cuando incluyes poster="", el atributo está presente pero su valor es una cadena vacía, que no es una URL válida — esto activa el error del validador W3C: Valor incorrecto “” para el atributo “poster” en el elemento “video”: Debe ser no vacío.

Este problema ocurre comúnmente en algunos escenarios:

  • Salida de plantillas o CMS donde la URL del poster se genera dinámicamente pero la variable se resuelve a una cadena vacía (ej., poster="<?= $posterUrl ?>" cuando $posterUrl está vacía).
  • Frameworks de JavaScript que vinculan un valor al atributo poster, pero la variable vinculada es null, undefined, o una cadena vacía.
  • Edición manual donde un desarrollador añade el atributo como marcador de posición con la intención de completarlo más tarde.

Por qué es importante

Aunque la mayoría de navegadores manejarán con elegancia un atributo poster vacío simplemente no mostrando una imagen poster, hay buenas razones para solucionarlo:

  • Cumplimiento de estándares: Un valor poster vacío viola la especificación HTML. El marcado válido asegura un comportamiento predecible en todos los navegadores y dispositivos.
  • Peticiones de red innecesarias: Algunos navegadores pueden intentar resolver la cadena vacía como una URL relativa, potencialmente activando una petición HTTP fallida hacia la URL de la página actual. Esto desperdicia ancho de banda y llena las herramientas de desarrollo y logs del servidor con errores espurios.
  • Accesibilidad: Los lectores de pantalla y tecnologías asistivas pueden interpretar el atributo vacío de manera inconsistente, llevando a anuncios confusos para los usuarios.

Cómo solucionarlo

Tienes dos opciones directas:

  1. Proporcionar una URL de imagen válida — Si quieres un marco poster, establece el valor a una ruta de imagen real.
  2. Eliminar el atributo por completo — Si no necesitas una imagen poster, simplemente omite poster. El navegador no mostrará nada o mostrará el primer marco del vídeo una vez que se hayan cargado suficientes datos, dependiendo de la configuración del atributo preload.

Si el valor vacío proviene de código dinámico, añade una verificación condicional para que el atributo poster solo se renderice cuando una URL esté realmente disponible.

Ejemplos

❌ Inválido: Atributo poster vacío

<video controls poster="">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Esto activa el error de validación porque poster está presente pero no tiene valor.

✅ Corregido: Atributo poster con una URL válida

<video controls poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

El atributo poster ahora apunta a un archivo de imagen válido que el navegador mostrará antes de que comience la reproducción.

✅ Corregido: Atributo poster eliminado por completo

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Cuando no se necesita una imagen poster, omitir el atributo es la solución más limpia.

✅ Corregido: Renderizado condicional en una plantilla

Si estás usando un lenguaje de plantillas o framework, incluye condicionalmente el atributo solo cuando exista un valor. Aquí tienes un ejemplo conceptual usando una plantilla del lado del servidor:

<!-- Sintaxis de pseudo-plantilla: solo renderizar poster cuando posterUrl no esté vacía -->

<video controls {{#if posterUrl}}poster="{{posterUrl}}"{{/if}}>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Este patrón previene que el poster="" vacío llegue al HTML renderizado, manteniendo tu salida válida independientemente de si una URL de poster está disponible.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.