Soluciona el Error 153 de YouTube causado por Content-Security-Policy

Cuando configuras cabeceras de seguridad estrictas en WordPress, especialmente la directiva Content-Security-Policy (CSP), algunos elementos incrustados como vídeos de YouTube pueden dejar de funcionar. Uno de los problemas más típicos es el Error 153, que aparece al intentar reproducir un vídeo dentro de un `<iframe>`.

Este artículo explica por qué sucede, cómo identificar el origen del bloqueo y cómo solucionarlo en servidores Apache, Nginx o Cloudflare.

¿Qué es el Error 153 de YouTube?

Este error indica que el reproductor de YouTube no puede cargarse debido a que alguna política de seguridad del navegador está bloqueando los recursos necesarios para inicializar el vídeo.

Suele venir acompañado de mensajes como:

• Error de configuración del reproductor de vídeo
• Video player error 153

Se trata de uno de los errores más comunes causados por iframes bloqueados debido a restricciones de seguridad.

¿Por qué ocurre este error?

La causa más habitual es una política CSP demasiado restrictiva, que bloquea alguno de estos elementos:

• Scripts necesarios de YouTube y Google
• La carga del iframe del reproductor
• Peticiones a `ytimg.com`
• Estilos que utiliza el reproductor

Si estos dominios no están permitidos de forma explícita, el navegador evita que el reproductor funcione por razones de seguridad.

Cómo detectar si CSP es el problema

Puedes confirmarlo desde el inspector del navegador:

1. Abre la página con el vídeo incrustado.
2. Pulsa F12 (o clic derecho → Inspeccionar).
3. Ve a la pestaña Console.
4. Si ves mensajes como estos:
   • Refused to load the script ‘https://www.youtube.com/’ because it violates the Content-Security-Policy
   • Refused to frame ‘https://www.youtube.com/’

… entonces la CSP está impidiendo el funcionamiento del reproductor.

Solución para Apache (.htaccess)

Añade esta configuración al archivo `.htaccess`:

# Security Headers
<IfModule mod_headers.c>
	Header always set X-Content-Type-Options "nosniff"
	Header always set X-XSS-Protection "1; mode=block"
	Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.youtube.com https://s.ytimg.com https://www.google.com; style-src 'self' 'unsafe-inline' https://www.youtube.com; img-src 'self' data: https: http:; font-src 'self' data:; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com; connect-src 'self' https://www.youtube.com; media-src 'self' https://www.youtube.com https:; frame-ancestors 'self';"
	Header always set Referrer-Policy "no-referrer-when-downgrade"
	Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
	Header always set Permissions-Policy "accelerometer=(), autoplay=(self), camera=(), cross-origin-isolated=(), encrypted-media=*, fullscreen=*, geolocation=(self), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), payment=*, picture-in-picture=*, publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), xr-spatial-tracking=(), gamepad=(), serial=(), window-placement=()"
	Header always set Feature-Policy "display-capture 'self'"
	Header always set X-Permitted-Cross-Domain-Policies "none"
</IfModule>

No funciona el Autoplay

Si estás utilizando alguna librería como Magnific Popup para mostrar el vídeo en un Popup, no funciona el Autoplay y tienes todo correcto. Modifica la línea de Permissions-Policy de la cabecera con lo siguiente:

• autoplay=* – Permite autoplay para todos los orígenes (incluido YouTube)
• encrypted-media=* – Permite contenido encriptado
• picture-in-picture=* – Permite picture-in-picture

Limpia la caché del navegador (Ctrl+Shift+Supr o Ctrl+F5) y prueba de nuevo. El autoplay debería funcionar ahora.

Solución para Nginx

Añade estas líneas dentro del bloque `server {}`:

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.youtube.com https://s.ytimg.com https://www.google.com; style-src 'self' 'unsafe-inline' https://www.youtube.com; img-src 'self' data: https: http:; font-src 'self' data:; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com; connect-src 'self' https://www.youtube.com; media-src 'self' https://www.youtube.com https:; frame-ancestors 'self';";

Reinicia Nginx con `sudo systemctl restart nginx`

Solución para Cloudflare

Si usas Cloudflare, puedes añadir CSP desde:

Reglas → Transform Rules → Response Header Modification

Crea una regla:

• Acción: Set Response Header
• Header: `Content-Security-Policy`
• Valor: *(el CSP completo incluyendo los dominios de YouTube)*

Cloudflare aplicará esta cabecera antes de que la petición llegue a tu servidor.

Dominios obligatorios para permitir YouTube en CSP

Asegúrate de que tu política incluya al menos:

• https://www.youtube.com
• https://www.youtube-nocookie.com
• https://s.ytimg.com
• https://www.google.com

Sin estos, el reproductor fallará.

Evita que la CSP bloquee tus vídeos de YouTube: recomendaciones finales

El Error 153 de YouTube suele deberse a una CSP demasiado restrictiva. Ajustando los orígenes permitidos podrás cargar vídeos embebidos sin comprometer la seguridad del sitio. Una vez aplicados los cambios, recuerda borrar la caché del servidor y del CDN para comprobar que todo funciona correctamente.

“Una buena configuración de la seguridad en cabeceras HTTP es clave para evitar bloqueos de recursos externos como YouTube.”

Si aún no has revisado tu configuración de seguridad, recuerda que configurar correctamente las cabeceras de seguridad en tu web puede ayudarte a prevenir no solo este error, sino muchos otros relacionados con contenido embebido, formularios o scripts externos. Es un paso importante para proteger tu sitio sin perder funcionalidades.

En Bubuku trabajamos con muchos proyectos donde la seguridad web y la integración de servicios externos (como YouTube o formularios) es clave. Si te has encontrado con este tipo de errores y necesitas una solución más ajustada a tu caso, puedes contar con nosotros para echarte una mano desde nuestro servicio de desarrollo web a medida

Preguntas frecuentes sobre el Error 153 de YouTube y CSP

Si aún tienes dudas tras aplicar los cambios, aquí resolvemos algunas preguntas comunes que suelen surgir al enfrentarse al Error 153 y a los ajustes en la cabecera Content-Security-Policy.