Embed fails with Error 153 when the host page suppresses the `Referer` header

[swashbuck]

Summary

The component's <iframe> sets enablejsapi=1 but no referrerpolicy. When the host page uses a referrer policy that strips the Referer header on cross-origin requests (e.g. Referrer-Policy: same-origin, set via response header or a <meta name="referrer"> tag), the embed request to YouTube arrives with no Referer. YouTube rejects it with Error 153 and the video never plays. The same content plays fine on pages that send a referrer.

Cause

YouTube requires embedded players to identify themselves via the HTTP Referer header. Per YouTube's Required Minimum Functionality policy:

API Clients that use the YouTube embedded player (including the YouTube IFrame Player API) must provide identification through the HTTP Referer request header.

and it recommends host pages use the strict-origin-when-cross-origin policy so the header is preserved. The onError reference documents the failure code:

Error 153 indicates the request does not include the HTTP Referer header or equivalent API Client identification.

The default browser referrer policy sends a referrer, so the problem only surfaces on hosts that tighten the policy. The iframe currently has no referrerpolicy attribute to override a restrictive document-level policy per-request.

Fix

Add a referrerpolicy to the iframe in the template so the embed always sends at least the origin, regardless of the host page's document policy:

<iframe width="640px" height="360px" style="width:100%;"
  referrerpolicy="strict-origin-when-cross-origin"
  src="{{_media._source~}}
  ...

strict-origin-when-cross-origin is the value YouTube's own docs recommend. The iframe attribute overrides the document referrer policy for that request only, so it does not weaken the host page's policy for anything else.

Optional hardening

YouTube also advises always setting an origin param when enablejsapi=1 ("you should always specify your domain as the origin parameter value") as an anti-hijacking measure. This is not a substitute for the Referer fix — origin guards the JS API channel, it is not the client-identity check that 153 fires on — but it's worth adding. It requires a JS-side change to inject &origin=<encoded page origin> into the src (the template has no access to the page origin), and should URL-encode the value.

Verification

Reproduced by setting <meta name="referrer" content="same-origin"> on the host page and inspecting the embed request in DevTools:

State	Referer on embed request	Result
no referrerpolicy on iframe	absent	Error 153
referrerpolicy="strict-origin-when-cross-origin"	origin sent	plays normally

Only the iframe attribute changed between the two; the document policy stayed same-origin.

Related issues

No existing issue covers the Referer/Error 153 cause. #38 (container doesn't resize when the YouTube API is already loaded) touches the same YouTubeView.js init path but is a distinct bug — a resize/crop from an early return, not the referrer rejection — so this is not a duplicate.

---

Posted via collaboration with Claude Code