Skip to content

fix(docs-infra): load cross-origin video embeds under COEP credential…#69205

Merged
atscott merged 1 commit into
angular:mainfrom
erkamyaman:docs-coep-credentialless
Jun 9, 2026
Merged

fix(docs-infra): load cross-origin video embeds under COEP credential…#69205
atscott merged 1 commit into
angular:mainfrom
erkamyaman:docs-coep-credentialless

Conversation

@erkamyaman

@erkamyaman erkamyaman commented Jun 6, 2026

Copy link
Copy Markdown
Contributor

adev is cross-origin isolated (COOP same-origin + COEP require-corp) so the embedded WebContainer editor can use SharedArrayBuffer. Under require-corp the cross-origin YouTube iframe in <docs-video> only loaded in Chromium, leaving the player blank in Safari.

Switch COEP from require-corp to credentialless. The page stays cross-origin isolated, so the editor keeps working, but cross-origin frames are now allowed to load, which restores the inline player in Safari as well.

PR Checklist

Please check to confirm your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.io application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

adev sets COOP: same-origin + COEP: require-corp on every response so the
embedded WebContainer editor can use SharedArrayBuffer. Under require-corp,
the cross-origin YouTube iframe in <docs-video> only loads in Chromium (via
the credentialless iframe attribute). In Safari the player is blank.

What is the new behavior?

Switches COEP from require-corp to credentialless in adev/angular.json and
adev/firebase.json. The page stays cross-origin isolated (the editor keeps
working), but cross-origin frames are now allowed to load, which fixes the
inline player in Safari as well as Chromium.

Does this PR introduce a breaking change?

  • Yes
  • No

@erkamyaman
fix(docs-infra): load cross-origin video embeds under COEP credential…
f5ef068 
…less

adev is cross-origin isolated (COOP same-origin + COEP require-corp) so the
embedded WebContainer editor can use SharedArrayBuffer. Under require-corp the
cross-origin YouTube iframe in `<docs-video>` only loaded in Chromium, leaving
the player blank in Safari.

Switch COEP from `require-corp` to `credentialless`. The page stays cross-origin
isolated, so the editor keeps working, but cross-origin frames are now allowed
to load, which restores the inline player in Safari as well.
@erkamyaman erkamyaman marked this pull request as ready for review June 6, 2026 08:20
@angular-robot angular-robot Bot added the area: docs-infra Angular.dev application and infrastructure label Jun 6, 2026
@pullapprove pullapprove Bot requested a review from alan-agius4 June 6, 2026 08:20
@ngbot ngbot Bot added this to the Backlog milestone Jun 6, 2026
@erkamyaman

erkamyaman commented Jun 6, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Thanks for the pointer in #55310 (comment) this was exactly it @JeanMeche Relaxing the embedder policy to
credentialless keeps the cross-origin isolation the editor needs while letting
the YouTube iframe load, and it fixes Safari on top of Chromium.

One gap remains: Firefox still blocks the embed, since it has no credentialless
iframe attribute and its credentialless policy only applies to subresources,
not nested frames. I have a facade-based fallback ready for that and will open it
as a follow-up once this lands so this header fix can land on its own.

What do you think of this approach? I know it's a bit ugly but better than firefox error screen. Happy to adjust if you'd rather handle it differently.

Screen.Recording.2026-06-06.at.11.27.41.mov

Firefox is sadly still the same.
image

@github-actions

github-actions Bot commented Jun 6, 2026

Copy link
Copy Markdown

Deployed adev-preview for f5ef068 to: https://ng-dev-previews-fw--pr-angular-angular-69205-adev-prev-3qr4dw1w.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@erkamyaman

erkamyaman commented Jun 6, 2026

Copy link
Copy Markdown
Contributor Author

Deployed adev-preview for f5ef068 to: https://ng-dev-previews-fw--pr-angular-angular-69205-adev-prev-3qr4dw1w.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

The fix works on my machine :) but didn't make it to the preview link. I think it might just be a stale deploy: curl -sI <preview>/events/v22 still returns cross-origin-embedder-policy: require-corp, while the committed config at the PR head (f5ef068) already has credentialless in both adev/firebase.json and adev/angular.json. Previews seem to take their COEP header from firebase.json and only re-apply it on redeploy, and the last adev-preview-deploy looks like it ran against 255151a41 rather than this PR's head. So maybe the preview just needs a fresh deploy of the head to pick it up, wdyt?

@JeanMeche

JeanMeche commented Jun 6, 2026

Copy link
Copy Markdown
Member

It might be possible that the firebase config is not based on the content of the PR but from main directly (for security reasons), cc @josephperrott

@alan-agius4

alan-agius4 commented Jun 6, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Indeed.

@JeanMeche JeanMeche removed the request for review from alan-agius4 June 9, 2026 14:36
@JeanMeche JeanMeche added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels Jun 9, 2026
@JeanMeche JeanMeche mentioned this pull request Jun 9, 2026
Closed
@atscott atscott merged commit 86cd166 into angular:main Jun 9, 2026
28 checks passed
@atscott

atscott commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

This PR was merged into the repository. The changes were merged into the following branches:

@erkamyaman erkamyaman deleted the docs-coep-credentialless branch June 9, 2026 20:42
@JeanMeche

JeanMeche commented Jun 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Looks like this change didn't fix the issue. COEP is now credentialless but the iframe still doesn't load on firefox

@erkamyaman

erkamyaman commented Jun 10, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for the pointer in #55310 (comment) this was exactly it @JeanMeche Relaxing the embedder policy to credentialless keeps the cross-origin isolation the editor needs while letting the YouTube iframe load, and it fixes Safari on top of Chromium.

One gap remains: Firefox still blocks the embed, since it has no credentialless iframe attribute and its credentialless policy only applies to subresources, not nested frames. I have a facade-based fallback ready for that and will open it as a follow-up once this lands so this header fix can land on its own.

What do you think of this approach? I know it's a bit ugly but better than firefox error screen. Happy to adjust if you'd rather handle it differently.

Screen.Recording.2026-06-06.at.11.27.41.mov
Firefox is sadly still the same. image

Yeah, as I mentioned here there's nothing we can do to make the YouTube embed work in Firefox directly. The facade-based fallback can handle that (a bit ugly, but better than nothing), I can open it as a separate follow-up if we're agreed on the approach.

@JeanMeche

JeanMeche commented Jun 10, 2026

Copy link
Copy Markdown
Member

We can at least have a look at what you suggest :)

erkamyaman added a commit to erkamyaman/angular-tr that referenced this pull request Jun 10, 2026
@erkamyaman
fix(docs-infra): use a facade for docs-video to fix Firefox embeds
1eb3fc1 
Follow-up to angular#69205. After switching adev's COEP to `credentialless`, the
cross-origin YouTube iframe in `<docs-video>` loads in Chromium and Safari but
not Firefox, whose `credentialless` policy does not extend to nested frames. The
result was a COEP error screen instead of the player.

Render `<docs-video>` as a lightweight thumbnail facade instead of embedding the
iframe directly. The thumbnail is a cross-origin subresource, so it loads under
`credentialless` in every browser. `DocViewer` then upgrades the facade to the
inline player on hydration in browsers that can load the embed (Chromium,
Safari), preserving the previous behavior there. On Firefox the facade stays a
plain link that opens the video on YouTube (with autoplay), which replaces the
error screen.

The thumbnail uses `maxresdefault` and falls back to `hqdefault` when a video
has no max-resolution image.
@erkamyaman erkamyaman mentioned this pull request Jun 10, 2026
Open
14 tasks
erkamyaman added a commit to erkamyaman/angular-tr that referenced this pull request Jun 11, 2026
@erkamyaman
fix(docs-infra): use a facade for docs-video to fix Firefox embeds
1420af3 
Follow-up to angular#69205. After switching adev's COEP to `credentialless`, the
cross-origin YouTube iframe in `<docs-video>` loads in Chromium and Safari but
not Firefox, whose `credentialless` policy does not extend to nested frames. The
result was a COEP error screen instead of the player.

Render `<docs-video>` as a lightweight thumbnail facade instead of embedding the
iframe directly. The thumbnail is a cross-origin subresource, so it loads under
`credentialless` in every browser. `DocViewer` then upgrades the facade to the
inline player on hydration in browsers that can load the embed (Chromium,
Safari), preserving the previous behavior there. On Firefox the facade stays a
plain link that opens the video on YouTube (with autoplay), which replaces the
error screen.

The thumbnail uses `maxresdefault` and falls back to `hqdefault` when a video
has no max-resolution image.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@JeanMeche JeanMeche JeanMeche approved these changes

Assignees

No one assigned

Labels

action: merge The PR is ready for merge by the caretaker adev: preview area: docs-infra Angular.dev application and infrastructure target: patch This PR is targeted for the next patch release

Projects

None yet

Milestone

Backlog

Development

Successfully merging this pull request may close these issues.

4 participants

@erkamyaman @JeanMeche @alan-agius4 @atscott