Web: YouTube embeds broken
adamziel opened this issue · 3 comments
The web version of Playground serves aCross-Origin-Embedder-Policy: credentialless header which conflicts with Cross-Origin-Embedder-Policy: require-corp served by YouTube. As a result, iframed videos don't load.
The credentialless header got added to support embedding in StackBlitz. However, that use-case didn't pick up much steam.
Let's remove the Cross-Origin-Embedder-Policy header entirely for now, and if it's needed later, add it behind a Query API flag.
Potentially related error:
{"hostName":"playground.wordpress.net","msg":"\u003Cspan jscontent="hostName">\u003C/span> is blocked"},"hideDetails":"Hide details","iconClass":"icon-generic","language":"en","suggestionsDetails":[],"suggestionsSummaryList":[],"summary":{"failedUrl":"https://playground.wordpress.net/scope:0.6838545064196246/wp-admin/admin.php?page=graphiql-ide","hostName":"playground.wordpress.net","msg":"\u003Cstrong jscontent="hostName">\u003C/strong> refused to connect."},"textdirection":"ltr","title":"playground.wordpress.net"}
It's worth noting that adding credentialless to the embed iframe like <iframe src="" credentialless> fixes the YouTube embed. This could be solved in WordPress core.
However, let's think about it some more.
Making a choice, like require-corp or credentialless has consequences for both sites trying to embed Playground, and the sites Playground wants to embed.
Maybe Playground doesn't need to provide the Cross-Origin-*-Policy headers at all? Removing it fixes the YouTube embed.
Chrome developer blog says:
We're introducing <iframe credentialless> to help embed third-party iframes that don't set COEP
That would work perfectly here.
Here's what MDN says about the credentialless iframe parameter:
This results in the documents inside the credentialless <iframe> being loaded using new, ephemeral contexts — those contexts don't have access to the data associated with their origins; for example cookies and localStorage. [data] is no longer accessible once the user has navigated away.