Bug: YouTube Embedded Videos Show Error 153 on Eventyay Video Pages

[mariobehling]

All embedded YouTube videos on the Eventyay Video component currently fail to load and display “Error 153” in the YouTube player.
The issue occurs across multiple videos, browsers, and events — suggesting a site-level configuration or embed integration error, not individual video settings.

Steps to Reproduce

1. Open any event session on Eventyay that includes a YouTube embed.

2. Observe that the video fails to load, showing the YouTube player error message:

   “An error occurred. Please try again later. (Playback ID … | Error 153)”

3. Open the same video directly on YouTube — it plays normally.

Expected Behavior

• Embedded YouTube videos should play correctly within the Eventyay Video interface.
• No playback errors for valid, public, or unlisted YouTube videos.

Observed Behavior

• All YouTube videos embedded on Eventyay Video pages fail with Error 153.
• Works fine when opened directly on YouTube.
• Affects both logged-in and logged-out users.

Likely Cause

Since the issue affects all embedded YouTube videos, it is most likely caused by one or more of the following:

1. Overly restrictive Content-Security-Policy (CSP)

   • Missing permissions for frame-src https://www.youtube.com https://www.youtube-nocookie.com;
   • Missing script-src for www.youtube.com or www.gstatic.com.

2. Incorrect or missing origin parameter when using enablejsapi=1

   • YouTube’s embed API requires an origin matching the exact eventyay domain (https://wikimedia.eventyay.com or https://eventyay.com).
   • Mismatch or missing parameter can cause HTTP 4xx/403 rejections internally.

3. Strict Referrer-Policy or proxy header misconfiguration

   • A Referrer-Policy: no-referrer or incorrect X-Forwarded-Proto (HTTP instead of HTTPS) may block YouTube requests.

4. Iframe sandbox or permission issues

   • A <iframe sandbox> tag without sufficient permissions (e.g. missing allow-scripts or allow-same-origin) prevents the player from running.

Suggested Fixes

✅ Update Embed Code
Use the canonical secure embed form:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?rel=0&modestbranding=1&enablejsapi=1&origin=https://wikimedia.eventyay.com"
  title="YouTube video player"
  allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
  allowfullscreen
  loading="lazy">
</iframe>

✅ Check Site Headers

• Ensure CSP allows required sources:

  frame-src https://www.youtube.com https://www.youtube-nocookie.com;
  script-src 'self' https://www.youtube.com https://www.gstatic.com;
  img-src 'self' data: https://i.ytimg.com https://*.ggpht.com;
  

• Ensure Referrer-Policy: strict-origin-when-cross-origin (not no-referrer).

• Confirm X-Forwarded-Proto: https if behind reverse proxy.

✅ Relax Iframe Sandbox if Used
If sandbox is required, include:

sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"

Testing Checklist

• Verify YouTube videos load in Chrome, Firefox, and Safari.
• Confirm playback works for both public and unlisted videos.
• Test both logged-in and guest sessions.
• Check network console for blocked requests or CSP violations.
• Validate player API messages and iframe attributes.

[mariobehling]

@Saksham-Sirohi Could you please also commit this fix to the development branch?

[Saksham-Sirohi]

Hi @mariobehling , I have made a pr there, but I am not able to test it due to a broken development backend linking. Please try using it on the app-test server, and let me know if the problem persists
fossasia/eventyay-video#432